用Vue实现animate.css组件动画

1.安装 ：npm install animate.css --save

2. 引入：在main.js中：

// animate 动画

import animate from "animate.css";

Vue.use(animate);

3. 绑定ref操作dom 给图片绑定animate__animated 此类名不能省略，否则动画无效

<div class="mastui_list_mainb>

      <img

            ref="scroll_matsui4"

            class="animate__animated"

            :class="{ animate__fadeInRight: anima4, show: showMatsuiFour }"

          />

</div>

4. 

　　data() {

   　　 return {,

   　　   anima4: false,

 　　     showMatsuiFour: false,

  　　  };

5. 获取滚动高度

  mounted() {

    window.addEventListener("scroll", this.animate_matsui);

  },

 

6.在方法中操作dom

 methods: {

    animate_matsui() {

      this.scroll =document.documentElement.scrollTop || document.body.scrollTop;

　　// 定义dom所在位置的高度

      let targetHeight4 = this.$refs.scroll_matsui4.offsetTop - window.outerHeight / 2;

      if (this.scroll > targetHeight4) {

        this.anima4 = true;

        this.showMatsuiFour = true;

      }

    },

  },

7. 在css样式中改变动画的过渡时间或者显现出来

.mastui_list_mainb img {

  width: 100%;

  opacity: 0;

  transition: opacity 0.5s;

}

.mastui_list_mainb img.show {

  opacity: 1;

}

 

8. 可以使用的动画效果

fade: {

        title: '淡入淡出',

        fadeIn: '淡入',

        fadeInDown: '向下淡入',

        fadeInDownBig: '向下快速淡入',

        fadeInLeft: '向右淡入',

        fadeInLeftBig: '向右快速淡入',

        fadeInRight: '向左淡入',

        fadeInRightBig: '向左快速淡入',

        fadeInUp: '向上淡入',

        fadeInUpBig: '向上快速淡入',

        fadeOut: '淡出',

        fadeOutDown: '向下淡出',

        fadeOutDownBig: '向下快速淡出',

        fadeOutLeft: '向左淡出',

        fadeOutLeftBig: '向左快速淡出',

        adeOutRight: '向右淡出',

        fadeOutRightBig: '向右快速淡出',

        fadeOutUp: '向上淡出',

        fadeOutUpBig: '向上快速淡出'

      },

      bounce: {

        title: '弹跳类',

        bounceIn: '弹跳进入',

        bounceInDown: '向下弹跳进入',

        bounceInLeft: '向右弹跳进入',

        bounceInRight: '向左弹跳进入',

        bounceInUp: '向上弹跳进入',

        bounceOut: '弹跳退出',

        bounceOutDown: '向下弹跳退出',

        bounceOutLeft: '向左弹跳退出',

        bounceOutRight: '向右弹跳退出',

        bounceOutUp: '向上弹跳退出'

      },

      zoom: {

        title: '缩放类',

        zoomIn: '放大进入',

        zoomInDown: '向下放大进入',

        zoomInLeft: '向右放大进入',

        zoomInRight: '向左放大进入',

        zoomInUp: '向上放大进入',

        zoomOut: '缩小退出',

        zoomOutDown: '向下缩小退出',

        zoomOutLeft: '向左缩小退出',

        zoomOutRight: '向右缩小退出',

        zoomOutUp: '向上缩小退出'

      },

      rotate: {

        title: '旋转类',

        rotateIn: '顺时针旋转进入',

        rotateInDownLeft: '从左往下旋入',

        rotateInDownRight: '从右往下旋入',

        rotateInUpLeft: '从左往上旋入',

        rotateInUpRight: '从右往上旋入',

        rotateOut: '顺时针旋转退出',

        rotateOutDownLeft: '向左下旋出',

        rotateOutDownRight: '向右下旋出',

        rotateOutUpLeft: '向左上旋出',

        rotateOutUpRight: '向右上旋出'

      },

      flip: {

        title: '翻转类',

        flipInX: '水平翻转进入',

        flipInY: '垂直翻转进入',

        flipOutX: '水平翻转退出',

        flipOutY: '垂直翻转退出'

      },

      strong: {

        title: '强调类',

        bounce: '弹跳',

        flash: '闪烁',

        pulse: '脉冲',

        rubberBand: '橡皮筋',

        shake: '左右弱晃动',

        swing: '上下摆动',

        tada: '缩放摆动',

        wobble: '左右强晃动',

        jello: '拉伸抖动'

      }