Question

我有一个导航，其中一些项目有一个下拉列表。在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;
}

Answer 1

我已设置浏览器前缀，并将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; }

Answer 2

在所有变换css之前预先-webkit-

-webkit-transform: translateY(100%);

仅使用前缀-webkit-在Safari中进行转换。

好习惯是使用tranform css

的所有前缀

transform:
-webkit-transform:
-moz-transform:
-ms-transform:
-o-transform:

这种方式转换适用于所有浏览器

Answer 3

我用一点点黑客解决了它..

设置height: 1px，对你好吗？并设置-webkit-transform和-webkit-transition支持。

下拉过渡在Safari中无效

3 个答案:

CSS