如何播放悬停关闭的反向关键帧动画

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;
}

小提琴演示(使用 SCSS(

Answer 1

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

如果还需要实现相反的效果，使用transition是最佳选择。完全有可能在使用过渡后产生效果，这与使用动画的方式非常相似。在:hover选择器中，应用transition设置，使:first-child的延迟低于第二个(和后续子项(，使其首先显示，并在默认选择器中应用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;
}

<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>

注意：在上面的代码片段中，我使用了编译的 CSS 并删除了所有-webkit-前缀，使其在所有浏览器上都可见。如果你想要带有前缀的SCSS代码，你可以在这里找到它。

---

综上所述，我仍然想解释一下您的animation演示造成了问题的原因。你做了很多正确的工作，你几乎接近实现你想要的。

动画

的工作方式是，一旦应用动画的选择器不再适用，动画就会被删除(丢失(，元素会立即恢复到其默认或原始状态。即使悬停时应用了另一个动画，在反向动画的关键帧设置中指定的属性在经过延迟时间之前不会应用。这意味着ul和a恢复为不可见(通过opacity或visibility(设置，在动画开始时再次变得可见(通过from关键帧(，然后动画化到结束状态(通过to关键帧再次不可见(。

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

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;
  visibility: hidden;
  animation: hideDropdown 1s;
  animation-delay: 0.5s;
  animation-fill-mode: backwards;
}
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);
  animation: hideDropdownItem 1s 0.2s;
  animation-fill-mode: backwards;
}
ul li ul li:first-child a {
  animation-delay: 0.4s;
}
ul li ul li:last-child {
  left: 250px;
}
ul li ul li:last-child a {
  animation-delay: 0.2s;
}
ul li:hover ul {
  animation: showDropdown 1s forwards;
  animation-delay: 0s;
}
ul li:hover ul li a {
  animation: showDropdownItem 1s forwards 0.2s;
}
ul li:hover ul li:last-child a {
  animation-delay: 0.4s;
}
@keyframes showDropdown {
  from {
    opacity: 0;
    height: 0;
    visibility: hidden;
  }
  to {
    height: 100px;
    opacity: 1;
    visibility: visible;
  }
}
@keyframes hideDropdown {
  from {
    height: 100px;
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    height: 0;
    visibility: hidden;
  }
}
@keyframes showDropdownItem {
  from {
    opacity: 0;
    transform: translate(0px, 100px);
  }
  to {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
@keyframes hideDropdownItem {
  from {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  to {
    opacity: 0;
    transform: translate(0px, 100px);
  }
}

<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>

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

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

Answer 2

有时使用

animation-direction: alternate;来反转当前动画更容易。