动画完成后Animate.css动画消失答案

【问题标题】：Animate.css animation disappears after animation is complete动画完成后Animate.css动画消失
【发布时间】：2020-05-21 06:09:39
【问题描述】：

我正在尝试构建一个菜单，其中每个列表项都有一系列动画。它可以工作，但是在动画之后，该项目又消失了。它看起来像 .animated 的可见属性没有被使用。您可以给我任何解决此问题的指示吗？

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

【问题讨论】：

标签： css animation css-animations css-transitions animate.css

【解决方案1】：

我建议您定义自己的动画，如果该动画无法按您的意愿工作。如果我没记错的话，预定义的动画是这样的

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

然后只需在 css 中将 animation-fill-mode: forwards; 添加到您的 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

【讨论】：