js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

Posted 2020-09-15 贝尔塔猫

css3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd; 

注意：transition,也仅仅有这一个事件。

 

http://www.runoob.com/jsref/event-transitionend.html

 

vuejs代码片段：

 setTimeout(() => {
        this.wrap.classList.add(‘swipe-transition‘);
        this.swipeMove(-this.index * this.pageWidth);

        once(this.wrap, ‘webkitTransitionEnd‘, _ => {
          this.wrap.classList.remove(‘swipe-transition‘);
          // 李钊鸿注释的代码
          // this.wrap.style.webkitTransform = ‘‘;
          this.swiping = false;
          this.index = null;
           // 李钊鸿加入的代码：
          this.$store.dispatch(‘set_translateX‘,‘0‘)
        });
}, 0);