Animate.css动画在动画完成后消失

Question

我正在尝试构建一个菜单项，其中每个列表项都有一系列动画。它可以工作，但是在动画之后该项目再次消失。好像没有使用.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;
    }
  }
}

Answer 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