给某个dom对象添加动画fadeIn、fadeInDown、flipInY、jackInTheBox


el为通过$ref获取到的dom对象
bindAnimation(el, x) {
      // x:fadeIn、fadeInDown、flipInY、jackInTheBox、rc-arrive

      let _self = this;
      // animationend  该事件在 CSS 动画结束播放时触发
      let events = [
        "webkitAnimationEnd",
        "mozAnimationEnd",
        "MSAnimationEnd",
        "oanimationend",
        "animationend"
      ];
      _self.addClass(el, x + " animated");
      events.forEach(event => {
        let func = function() {
          events.forEach(item => {
            el.removeEventListener(item, func);
          });
          _self.removeClass(el, x + " animated");
        };
        el.addEventListener(event, func);
      });
    },

 使用方法:

this.bindAnimation(this.$refs.ptwo, "fadeIn");
this.bindAnimation(this.$refs.pbro, "fadeInDown");
this.bindAnimation(this.$refs.ptwth, "flipInY");
this.bindAnimation(this.$refs.ptwf, "jackInTheBox");
this.bindAnimation(this.$refs.pdcf, "rc-arrive");
原文地址:https://www.cnblogs.com/pwindy/p/13039033.html