vue里面使用scrollReveal动画滚动的插件实现图片或者文章的动画

先来看看效果
在网站上我们看到很多下拉加载页面的，渐渐的显示，其实用的就是一个插件

想要实现这样的效果很简单

  一.
    安装 
  npm install --save vue-scroll-reveal 
  
  二.
    引用 在main.js中复制下面的代码
 import VueScrollReveal from 'vue-scroll-reveal';
 
Vue.use(VueScrollReveal,{
  class: 'v-scroll-reveal',  
  duration: 1000,
  scale: 1,
  distance: '0px',
  reset:true,
  mobile: false,
  useDelay: 'always',
  origin:'top',
  delay: 200
});
/ 或者 
Vue.use(VueScrollReveal);


三.使用
- 在你需要渐隐藏渐显的标签上加上`v-scroll-reveal.reset`就行了

      <div v-for="item in courseList" :key="item.id" :span="8" v-scroll-reveal.reset>
         <div class="rboxcont-top posr">
              <div class="imgacontext"></div>
              <a href="" class="imga">
                <h5>个人博客 [田园将芜]</h5>
                <img
                  src="https://cdn.img.wenhairu.com/images/2020/10/17/CeyKP.jpg"
                  alt=""
                  width="280px"
                />
              </a>
            </div>
        </p>
      </div>

  下面提供下自己可先选择的参数 自行参考
　当然，这只是 scrollReveal 插件的最基本的用法，是固定的一种淡入效果，（却  不是我想要的动画效果）接下来我们来看一看 scrollReveal 的属性：

　　以下是scrollReveal插件 官方文档 给出的属性（自己整理了一下）：

　　

　　　　　　 // 属性：（默认）
            delay: 0,                                // 延时时间
            distance: '0px',                            // 执行距离
            duration: 600,                            // 执行时长
            easing: 'cubic-bezier(0.5, 0, 0, 1)',     // 执行速度
            interval: 0,                                // 执行间隔（时间）
            opacity: 0,                                // 执行方式（透明度）
            origin: 'bottom',                        // 执行方式（偏移 top:自上而下,bottom:自下而上,left:自左往右,right:自右往左.）
            rotate: {                                // 执行方式（旋转）
                x: 0,                                // x
                y: 0,                                // y
                z: 0,                                // z
            },
            scale: 1,                                // 执行方式（缩放）
            cleanup: false,                            // 暂时不知道是什么东西
            container: document.documentElement,        // 执行容器（后跟元素，填写后只有容器内的元素执行动画）
            desktop: true,                            // 是否在电脑上面执行
            mobile: true,                            // 是否在手机上面执行
            reset: false,                            // 是否重复执行（）
            useDelay: 'always',                        // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
            viewFactor: 0.0,                            // 视图显示元素百分之多少的时候执行动画（单位：小数，例：0.50 在元素展示超过百分之五十的时候，执行动画）
            viewOffset: {                            // 视图偏移（把视图抽象成元素移动）
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
            },
            afterReset: function (el) {},            // 重置之后（视图内看不到元素之后，退场动画执行结束之后）
            afterReveal: function (el) {},            // 执行之后（动画已经执行完毕（已完成））
            beforeReset: function (el) {},            // 重置之前（视图内看不到元素之后，退场动画执行结束之前）
            beforeReveal: function (el) {},            // 执行之前（动画开始执行（未完成时））