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