Animate.css动画在动画完成后消失-前端问题

Animate.css animation disappears after animation is complete(Animate.css动画在动画完成后消失)

本文介绍了Animate.css动画在动画完成后消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试构建一个每个列表项都有一系列动画的菜单。它可以工作，但是在动画之后，该项目再次消失。它看起来好像没有使用.Animated的Visible属性。您能给我任何解决此问题的指导吗？

<ul class="menu-ani-item">
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
</ul>

.menu-ani-item {
  li {
    animation: slideInDown 2s;
    visibility: hidden;
    &:nth-child(1) {
      animation-delay: 0s;
    }
    &:nth-child(2) {
      animation-delay: 2s;
    }
    &:nth-child(3) {
      animation-delay: 3s;
    }
    &:nth-child(4) {
      animation-delay: 4s;
    }
    &:nth-child(5) {
      animation-delay: 5s;
    }
    &:nth-child(6) {
      animation-delay: 6s;
    }
    &:nth-child(7) {
      animation-delay: 7s;
    }
    &:nth-child(8) {
      animation-delay: 8s;
    }
    &:nth-child(9) {
      animation-delay: 9s;
    }
    &:nth-child(10) {
      animation-delay: 10s;
    }
    &:nth-child(11) {
      animation-delay: 11s;
    }
    &:nth-child(12) {
      animation-delay: 12s;
    }
  }
}

推荐答案

如果您自己的动画没有按您希望的那样工作，我建议您定义该动画。如果我没记错的话，预定义的动画是这样的

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

因此您的动画必须是：

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

然后只需将animation-fill-mode: forwards;添加到CSS中的li以保持可见性(这样您的CSS类似于)：

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
.menu-ani-item {
  li {
    animation: slideInDown 2s;
    animation-fill-mode: forwards;
    visibility: hidden;
    ...

Working example here

您可能需要在关键帧中添加供应商前缀，以确保所有内容都能跨浏览器正常工作。您可以阅读有关here和here的更多信息。但在SCSS中，您可以定义一般供应商前缀，如here

这篇关于Animate.css动画在动画完成后消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！