animate动画懒加载

（以下代码在vue中实现）

制作css动画可以使用animate动画库，也有在animate的基础上改进的动画库，例如aos.js  wow.js

动画如果一开始加载页面就全部播放完毕就没有了做动画的意义

懒加载也就是当页面视图滑动到元素的时候才会执行元素的动画，我介绍以下两种情况

一、动画只执行一次，窗口移走再次移回，动画不会再次执行

wow.js以animate为基础的动画，可以实现这种效果

main.js全局引入

import wow from 'wowjs'
Vue.prototype.$wow = wow

需要使用的页面初始化

mounted(){
    new this.$wow.WOW().init()
},

开始使用

<div class="card_text comeInLeft wow" data-wow-duration="1.5s" data-wow-delay='0.2s'>

添加一个class名  ‘wow’   data-wow-duration控制播放时长   data-wow-delay='0.2s'控制延迟播放时间

你可以直接添加动画class名，animate的动画可以直接用，也可以自己定义动画，比如下面的leftOpacity是我自定义的一个从左侧渐入的的动画

@keyframes leftOpacity {
    from {position: relative; left: -50px;opacity: 0;}
    to {position: relative;left: 0px;opacity: 1;}
  }
.comeInLeft{
    opacity: 0;
    animation:leftOpacity;
    animation-fill-mode:forwards;
    animation-timing-function: ease;//动画结束后保持动画结束时的样式
}

 

一、动画可以重复执行，窗口移走再次移回，动画可以再次执行

aos.js   用法与wow.js类似，但是不知道支不支持自定义动画

aos.js也可以实现动画只执行一次，窗口移走再次移回，动画不会再次执行

引入步骤与wow一样

<div data-aos="fade-up" data-aos-duration="2000">

data-aos添加动画名（去官网查询），data-aos-duration控制播放时长