lazy-animation v1.0.1
lazy-animation.js
lazy-animation.js是一个js库，他可以实现动态添加动画效果，js大小仅6kb
使用场景
在滚动到一个元素的指定位置时，触发设定的动画，指定位置可以相对元素进行上下设置
使用方法
设定动画
设定动画的方式一共有三种，
- 第一种：class方式
animate.css有很多优秀的动画效果，我们以这个动画效果库为例，先将这个animate.css引入到html head中，
<link rel="stylesheet" href="animate.min.css">然后再在需要设置动画效果的dom元素中设置
<img src="..." class="lazy-ani" data-ani-class="animate__animated animate__fadeInTopLeft">最后初始化lazyAni即可
<script>
lazyAni()
</script>- 第二种：自定义animation方式
这种方式分两种情况 a. 在data中设置keyframes动画，style中动态添加keyframes 在dataset中设置keyframes关键帧,比如在dom中写
<img src="..." class="lazy-ani" data-ani-0%="transform: rotate(180deg)" data-ani-50%="transform: rotate(100deg)" data-ani-100%="transform: rotate(0deg)">那么在调用lazyAni() 之后会在head节点在动态添加如下代码
<style>
@keyframes animation-${k} {
0% {transform: rotate(180deg)}
50% {transform: rotate(100deg)}
100% {transform: rotate(0deg)}
}
</style>ps: 支持from和to，分别用data-ani-from和data-ani-to进行设置
animation-${k}是默认动画名称（因为没有设置data-ani-name），k是当前html中的第k个lazy-ani元素。如果在dom设置data-ani-name的话，style中的keyframes的名称就会是data-ani-name的值
另外还有三个可设置的参数，分别是 data-ani-duration // 动画持续时间，对应css3中animation动画的duration参数，默认0.3s data-ani-function // 对应css3中animation动画的timing function参数，默认ease-in-out data-ani-delay // 延迟触发事件，对应css3中animation动画的delay参数，默认0s
b. 已经定义好keyframes
这种情况和上一种情况就差了已经设置好了keyframe名称，比如说我想用复用某个元素设置的自定义动画，此时就不需要再次定义动画，直接设置和那个元素设置的动画名称一样的动画名称即可。
<img src="..." class="lazy-ani" data-ani-name="tranRotate" data-ani-0%="transform: rotate(180deg)" data-ani-50%="transform: rotate(100deg)" data-ani-100%="transform: rotate(0deg)">
<!-- 第二个图片拥有与上一个图片一样的动画效果 -->
<img src="..." class="lazy-ani" data-ani-name="tranRotate">另外也可以自行在css文件或者style节点下定义keyframes，然后使用定义好的动画名称
<style>
@keyframes fadein {
from {opacity: 0}
to {opacity: 1}
}
</style>
<img src="..." class="lazy-ani" data-ani-name="fadein">这种情况的动画参数data-ani-duration，data-ani-function，data-ani-delay与上一种情况一致，这里就不再赘述
设定动画触发位置
触发位置的设置参数是data-ani-trigger,可选值有top,bottom,top+(\d+),top+(\d+%),top-(\d+),top-(\d+%),bottom+(\d+),bottom+(\d+%),bottom-(\d+),bottom-(\d+%)
top,bottom好理解，就是元素的顶部和元素底部，当滚动到这些位置时触发动画
\d+表示数字，比如5，10，100等等，比如top+100就表示元素顶部往下100px触发
\d+%表示百分数,比如30%，50%等等，这个百分数对应的是元素的高度，比如top+50%和bottom-50%就是到元素的中间位置触发动画