step1:下载/引入
-
或者使用npm:
npm install animate.css --save
-
或者使用yarn:
yarn add animate.css
-
CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
step2:绑定样式
<h1 class="animated bounceOutRight">animate demo</h1>
可以通过添加:infinite 来设置为一直循环:
<h1 class="animated infinite bounceOutRight">animate demo</h1>
设置延时执行:
<h1 class="animated infinite bounceOutRight delay-2s">animate demo</h1>
<!-- delay-2s 表示2秒之后再执行该动画 -->
step3:通过js控制样式
<span class="span1">animate demo</span>
<script>
let el = document.querySelector(".span1");
el.classList.add("animated", "bounceOutRight")
</script>
这样也可以给指定的元素绑定动画效果,也可以使用函数封装,然后通过事件触发。
step4:绑定动画结束事件
<span class="span1">animate demo</span>
<script>
let el = document.querySelector(".span1");
el.classList.add("animated", "bounceOutRight")
// 这里给元素绑定动画执行完毕之后的事件
el.addEventListener('animationend', function() { eventEnd() })
function eventEnd() {
el.classList.remove("bounceOutLeft")
}
</script>