Question

我尝试构建一个下拉菜单，首先下拉菜单向下滑动，然后从底部显示一个一个菜单项。在悬停时，它看起来不错，但我不知道如何在悬停时顺利播放。我想要做的是先隐藏第二个子菜单项，然后隐藏第一个子菜单项，然后下拉滑动。

我尝试的是默认情况下将隐藏动画关键帧添加到下拉列表中，并在悬停时添加显示动画，延迟为0。但它看起来不能正常工作。（它也会在页面加载时生成动画，这对我来说不好）

ul li ul {
  -webkit-animation: hideDropdown 1s;
  -webkit-animation-delay: 0.5s;
}

ul li:hover ul {
  -webkit-animation: showDropdown 1s forwards;
  -webkit-animation-delay: 0s;
}

Fiddle Demo（使用SCSS）

Answer 1

正如我在评论中指出的那样，产生动画的反向效果总是很复杂。这不是不可能，只是它需要额外的编码（如额外的关键帧）和调整所有相关的属性，以达到完美的效果。

如果需要实现相反的效果，使用transition是最佳选择。完全可能产生使用过渡后的效果，它与动画制作方式非常相似。在:hover选择器中，应用transition设置，使:first-child的延迟低于第二个（及后续子项），以便它首先显示，并在默认选择器中应用{{ 1}}设置使transition的延迟时间比其余时间长。

使用过渡还可以避免在页面加载本身上显示动画。这是因为只有当状态从一个状态变为另一个状态时才会发生转换。

:first-child

body {
  background: #f1f1f1;
}

ul {
  height: 100px;
  position: relative;
  background: #fff;
}
ul li {
  display: block;
  float: left;
  margin: 0;
  list-style-type: none;
  padding: 0;
}
ul li a {
  display: block;
  height: 100px;
  line-height: 100px;
  padding: 0 20px;
}
ul li ul {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 100px;
  height: 0px;
  opacity: 0;
  visibility: hidden;
  transition: all 1s 0.5s;
}
ul li ul li {
  position: absolute;
  left: 50px;
  bottom: 0px;
  width: 200px;
  overflow: hidden;
  height: 100px;
}
ul li ul li a {
  display: block;
  height: 100px;
  background: red;
  padding: 0 20px;
  position: absolute;
  opacity: 0;
  transform: translate(0px, 100px);
  transition: all 1s 0.2s;
}
ul li ul li:first-child a {
  transition-delay: 0.4s;
}
ul li ul li:last-child {
  left: 250px;
}
ul li ul li:last-child a {
  transition-delay: 0.2s;
}
ul li:hover ul {
  height: 100px;
  opacity: 1;
  visibility: visible;
  transition: all 1s 0s;
}
ul li:hover ul li a {
  opacity: 1;
  transform: translate(0px, 0px);
  transition: all 1s 0.2s;
}
ul li:hover ul li:last-child a {
  transition-delay: 0.4s;
}

注意：在上面的代码段中，我使用了已编译的CSS并删除了所有<ul> <li> <a href="#">Dropdown</a> <ul> <li><a href="">First</a></li> <li><a href="">second</a></li> </ul> </li> <li><a href="">Not dropdown</a></li> </ul>前缀，以便在所有浏览器中都可以查看。如果您希望SCSS代码带有前缀，您可以找到它here。

所有这一切，我仍然想解释一下你的-webkit-演示是如何产生问题的。你做了很多正确的工作，你几乎已经达到了你想要的目标。

动画的工作方式是，一旦应用动画的选择器不再适用，动画就会被删除（丢失），并且元素会立即快速恢复到默认或原始状态。即使在悬停时应用了另一个动画，在反向动画的关键帧设置中指定的属性也不会应用 ，直到延迟时间过去 。这意味着animation和ul快照恢复不可见（通过a或opacity）设置，在动画开始时再次可见（通过{{1} } keyframe）然后设置动画到结束状态（再次通过visibility关键帧不可见）。

此问题的解决方案是将from设置为to和animation-fill-mode: backwards（未覆盖状态）。此设置意味着即使在延迟期间，元素也会采用ul关键帧中指定的属性。

from

注意：与第一个代码段相同，上面的代码也使用没有前缀的纯CSS。带有前缀的SCSS版本可用here。

但如前所述，这不会阻止动画在页面加载时可见。阻止它的唯一方法是使用JavaScript。

Answer 2

有时候使用animation-direction: alternate;来反转当前动画会更容易。

如何播放反向关键帧动画以便悬停？

2 个答案: