vue项目中使用scrollreveal库

scrollreveal库是一个酷炫的动画库，可以控制元素怎么显示，delay多久显示等等效果

本文只讲vue2项目中如何使用，其他项目可以参考
首先安装：npm i scrollreveal -d
使用方法：单文件组件复制以下代码，效果就能出来，酷炫

<template>
  <div id="app">
    <div style="height: 1000px">
      <div class="reveal-top">
        <img
          src="https://haosirl.gitee.io/medias/featureimages/%E4%BA%8C%E6%AC%A1%E5%85%83/3.png"
        />
      </div>
      <div class="reveal-top">
        <img
          src="https://haosirl.gitee.io/medias/featureimages/%E4%BA%8C%E6%AC%A1%E5%85%83/3.png"
        />
      </div>
      <div class="reveal-top">
        <img
          src="https://haosirl.gitee.io/medias/featureimages/%E4%BA%8C%E6%AC%A1%E5%85%83/3.png"
        />
      </div>
      <div class="reveal-top">
        <img
          src="https://haosirl.gitee.io/medias/featureimages/%E4%BA%8C%E6%AC%A1%E5%85%83/3.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
import scrollReveal from "scrollreveal";
export default {
  name: "App",
  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,
    });
  },
  components: {},
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>