css transition回调

css transition回调

需求

需要在一个css css transition执行完毕之后执行一个回调的方法。

解决

可以用window.addEventListener(‘transitionend’);监听到transition执行完毕。

存在的问题

当前页面中所有的transition执行完毕后都会触发该监听，使用的时候需要在回调中甄别是否是指定的transition，可以根据触发监听的dom元素来实现。

代码

 window.addEventListener('transitionend', this.callbackTransitionend);
 ......
 callbackTransitionend(e) {
 	if (e.srcElement.className === 'progress') ......;//用类名判断是否是自己需要的transition
},