vue中结合animate.css实现元素动画入场

话不多说先看下demo的GIF：

1.首先引入animate.css，可以直接在index.html中cdn引入；

2.其次在开发这种动画较多的页面我觉得还是引用jquery比较方便，操作dom稍多，
我这里没有使用jquery，就想复习复习原生js。可以npm安装，在build/webpack.base.conf.js中定义插件：
    var webpack = require('webpack '); 
    在module.exports的对象中加入：
    plugins:[
      new webpack.ProvidePlugin({
         $:"jquery",
         jQuery:"jquery",
         "windows.jQuery":"jquery"
      })
    ],

接下来直接上该页面代码，就是一个vue组件：

不难看得出核心代码就是那个handleAnimate方法，实际运用中肯定多个页面会有动画效果，这个函数可以抽离成公共代码，其实他可以只需要接收一个所有运动元素的统一选择器(这里的".animate")，而该方法通过这些".animate"元素传入的自定义属性ani来判断该元素被指定了哪种动画类型，通过动态添加该类型名称的class来定义animation动画，在最初我的思路是将animation-delay动画延迟同样用该类型的class在css中定义，最后我又考虑到如果不止一个元素必须用同一个动画类型，但是有的需要有的不需要延迟呢，那不是该属性出现耦合了？所以最后把所有动画延迟定义在该元素自身—data-delay，没错又是自定义属性，把需要有延迟时间的元素就加一个自定义属性delay，执行中判断是否有该属性，有的话就用setTimeout来延迟该属性的值的时间添加动画class，这样就让动画样式和动画延迟互不影响了，动画类型样式完全复用，同时，如果直接定义animation-delay或者直接animation以简写的形式来定义动画延迟的话，当被添加上动画class时该元素就会立马显示出来，就是说在延迟期间(元素动起来之前)它也是处于显示状态的，可以用js操作用setTimeout来延迟元素显示出来，不过比较麻烦了，因为还得js获取animate-delay的值才能知道延迟时间，所以我上面最后用的是自定义属性通过延迟添加类来处理延迟动画，比较好操作。这些便是核心思路。

附一个header导航滚动过渡透明效果代码：

let header = document.querySelector('.'+styles.header)
    document.onscroll = ()=>{
    let doc = document.documentElement || document.body
    let y = doc.scrollTop || doc.scrollTop
    let h = Math.max(doc.scrollHeight,doc.scrollHeight);
    let transparent = (1 - y/h).toFixed(2)
    if(transparent < '0.4') transparent = '0.4';
    header.style.background = `rgba(0, 14, 51,${transparent})`
}