使用 JavaScript 脚本检测 CSS3 动画是否执行完成

Z时代
2024-01-10
分类：IT

在我们编写 CSS3 动画的时候，我们可能需要去检测动画是否完成，也就是 CSS3 动画的回调事件，这个使用纯 CSS3 可能是无法完成的，不过我们可以使用 JavaScript 原生的一些方法，检测 CSS3 动画是否完成。

function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd',
      'MsTransition':'msTransitionEnd'
    }
    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}
/* Listen for a transition! */
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
	console.log('Transition complete!  This is the callback, no library needed!');});