vue2中引入scrollreveal.js做出惊艳的动画

现在很多产品展示的网页在滚动的时候会触发动画，如果用js去写的话需要监听scrolltop，会很繁琐，而scrollreveal.js可以完美地实现这样的效果.

js的使用方法很简单，直接引入就可以了，但是vue中该如何使用呢？

首先，安装用npm插件:

npm install scrollreveal

引入到组件中：

import scrollReveal from 'scrollreveal';

然后在data中注册，这点官网文档没提及，所以会导致初始化不成功，

data () {
  return {
    scrollReveal: scrollReveal()
  }
},

最后，自定义类名。

mounted() {
  this.scrollReveal.reveal('.reveal-top', {
    // 动画的时长
    duration: 2000,
    // 延迟时间
    delay: 500,
    // 动画开始的位置，'bottom', 'left', 'top', 'right'
    origin: 'top',
    // 回滚的时候是否再次触发动画
    reset: false,
    // 在移动端是否使用动画
    mobile: false,
    // 滚动的距离，单位可以用%，rem等
    distance: '200px',
    // 其他可用的动画效果
    opacity: 0.001,
    easing: 'linear',
    scale: 0.9,
  });
},

将自定义的类名添加到html代码中

<ul>
    <li class="reveal-top">
        <img src="http://g.hiphotos.baidu.com/image/pic/item/37d3d539b6003af37401eb21392ac65c1038b633.jpg" class="img">
    </li>
    <li class="reveal-top">
        <img src="http://g.hiphotos.baidu.com/image/pic/item/37d3d539b6003af37401eb21392ac65c1038b633.jpg" class="img">
    </li>
</ul>

就可以看到效果了！