animate.css动画初始状态隐藏

Posted 2023-03-31

参考技术A 在使用animate.css会做移动端的css动画，PC端的结合jquery.fullpage.js就能做一个全屏滚动的企业网站，但初始状态下需要隐藏有动画的元素

可以给animated类添加opacity:0属性 ，动画在开始状态是隐藏的，当动画元素出现在屏幕可视区域，动画会自动执行，执行完动画会保持最后一个状态不变，也就是不会隐藏，但使用是有前提的！！敲重点

在animate.css中能使用这种方法的动画类名只有和fadeIn相关的才能用 ，fadeIn、fadeInUp、fadeInDown、fadeInLeft、fadeInRight都可以使用

像slideInUp这些slideIn相关的都不能使用

使用jQuery检测animate.css的动画状态和动画状态结束[重复]

【中文标题】使用jQuery检测animate.css的动画状态和动画状态结束[重复]

【英文标题】：Detect being animated and end of animation state for animate.css with jQuery [duplicate]

【发布时间】：2017-03-21 19:06:55

【问题描述】：

我正在使用 animate.css 为我的网页上的几个块设置动画。

<a href="#" class="clicktoanimate">Click to animate</a>
<div class="div-to-animate">
    some content...
</div>

$('.clicktoanimate').click(function(direction)
    $('.div-to-animate').addClass('animated fadeIn');
);

动画就是这样。

但是现在我想在动画和动画完成时执行一些任务。

所以，为了检查它是否正在动画，我使用了以下条件

if ($('.div-to-animate').hasClass('animated')) 
   // do something 

这很好，但并非适用于所有情况。因为动画类在过渡后没有被移除。

所以，我想我现在需要解决的唯一难题是：动画完成后如何删除动画类。

【参考方案1】：

您可以监听animationend 事件并在其触发时移除该类：

$(".div-to-animate").on("animationend", function() 
    $(this).removeClass("animated");
);

例子：

$(".div-to-animate").on("animationend", function() 
  console.log("done");
  $(this).removeClass("animated");
).addClass("animated fadeIn");

.animated 
  color: green;

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<div class="div-to-animate">This is the div, it's green while being animated</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>