pwindy  
在完成任务的同时,还需要不断“复盘”,不论你多么的忙,都需要留下时间思考,可以思考哪些地方做的好,哪些地方我们可以改进,应该如何改进,注重总结才是王道

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");

 

posted on 2020-06-03 17:43  pwindy  阅读(755)  评论(0)    收藏  举报