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