vue使用scrollReveal滚动插件

//npm安装scrollReveal
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>

转自：https://www.cnblogs.com/wang-dl/p/13577798.html