animite.css学习教程
参考https://github.com/daneden/animate.css
最近发现animite.css做动画比较省力，本着不重复做轮子的想法。学习了一下，简单快捷易上手。
下面通过demo直接演示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate学习demo</title>
<link rel="stylesheet" href="animate.css" type="text/css">
<style>
/*demo2*/
.yourElement {
/*动画持续时间*/
animation-duration: 5s;
/*页面渲染好后，动画开始的时间，即等待5s开始动画*/
animation-delay: 2s;
/*动画播放次数*/
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<!--demo1-->
<h1 class="animated infinite bounce delay-2s">这是第一种使用方式</h1>
<!--demo2-->
<h1 class="animated bounce yourElement">这还是第一种使用方式，但修改了默认属性</h1>
<!--demo3-->
<h1 class="demo3">这是第二种使用方式，js引入</h1>
<script>
// 选取第一个元素，添加样式
const demo3 = document.querySelector('.demo3')
demo3.classList.add('animated', 'bounceOutLeft','infinite')
</script>
<!--demo4-->
<h1 class="demo4">还可以设置监听函数，在动画结束后，执行回调函数</h1>
<script>
const demo4 = document.querySelector('.demo4')
demo4.classList.add('animated', 'bounceOutRight')
//设置监听，执行回调函数
demo4.addEventListener('animationend', function() { console.log('demo4动画结束，回调了！') })
</script>
<!--demo5-->
<h1 class="demo5">还可以设置js函数，用来添加和删除animations</h1>
<script>
// 自定义函数
//element为要选择的元素，animationName为要添加的动画名称，callback为回调函数名
function animateCSS(element, animationName, callback) {
// 选择元素，并为元素添加动画
const node = document.querySelector(element)
node.classList.add('animated', animationName)
// 这个函数用来移除动画样式，移除监听，然后执行回调函数
function handleAnimationEnd() {
node.classList.remove('animated', animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function') callback()
}
// 设置监听，动画结束后，执行handleAnimationEnd
node.addEventListener('animationend', handleAnimationEnd)
}
// animateCSS('.demo5', 'bounce')
// or
animateCSS('.demo5', 'bounce', function() {
// Do something after animation
console.log('这是demo5')
})
</script>
</body>
</html>
7086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
