我有一个导航,其中一些元素有一个下拉菜单。 在 Firefox 和 Chrome 中,一切都按预期工作。 但在 Safari 中根本不会发生转换。
我搜索了一下 safari 是否有转换问题,但页面上的其他转换没有任何问题。
我添加了一个 fiddle带代码。
HTML
<nav>
<ul>
<li><a href="">lorem</a></li>
<li class="dd">
<a href="" class="dd-trigger">ipsum</a>
<ul class="dd-list">
<li><a href="">sit</a></li>
<li><a href="">amet</a></li>
</ul>
</li>
<li><a href="">dolor</a></li>
</ul>
</nav>
CSS
nav > ul:after {
display: table;
clear: both;
content: '';
}
nav {
margin-top: 60px;
}
nav > ul {
background: turquoise;
}
nav > ul > li {
float: left;
margin-left: 20px;
}
.dd {
position: relative;
}
.dd:hover .dd-list {
height: auto;
opacity: 1;
transform: translateY(100%);
}
.dd-list {
background: lightgray;
position: absolute;
bottom: 0;
transform: translateY(97%);
height: 0;
overflow: hidden;
opacity: 0;
transition: opacity 250ms ease, transform 250ms ease, height 250ms ease;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul a {
display: block;
color: white;
padding: 10px 15px;
}
ul a:hover {
background: darkturquoise;
}
最佳答案
我已经设置了浏览器前缀并添加了一个 height: 1px;
到 .dd-list
。
<强> JSFiddle
CSS
nav > ul:after {
display: table;
clear: both;
content: '';
}
nav {
margin-top: 60px;
}
nav > ul {
background: turquoise;
}
nav > ul > li {
float: left;
margin-left: 20px;
}
.dd {
position: relative;
}
.dd:hover .dd-list {
height: auto;
opacity: 1;
transform: translateY(100%);
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
}
.dd-list {
background: lightgray;
position: absolute;
bottom: 0;
transform: translateY(97%);
-webkit-transform: translateY(97%);
-moz-transform: translateY(97%);
-ms-transform: translateY(97%);
-o-transform: translateY(97%);
height: 1px;
overflow: hidden;
opacity: 0;
transition: opacity 250ms ease, transform 250ms ease, height 250ms ease;
-webkit-transition: opacity 250ms ease, transform 250ms ease, height 250ms ease;
-moz-transform: opacity 250ms ease, transform 250ms ease, height 250ms ease;
-ms-transform: opacity 250ms ease, transform 250ms ease, height 250ms ease;
-o-transform: opacity 250ms ease, transform 250ms ease, height 250ms ease;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul a {
display: block;
color: white;
padding: 10px 15px;
}
ul a:hover {
background: darkturquoise;
}
关于html - 下拉过渡在 Safari 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36570074/