javascript - CSS 过渡回调

Question

是否可以在 CSS 转换完成时收到通知(如回调)？

Answer 1

是的，如果浏览器支持这样的事情，那么在转换完成时会触发一个事件。然而，实际事件因浏览器而异:

• Webkit 浏览器(Chrome、Safari)使用 webkitTransitionEnd
• Firefox 使用 transitionend
• IE9+ 使用 msTransitionEnd
• Opera 使用 oTransitionEnd

但是您应该知道 webkitTransitionEnd 并不总是触发!这让我抓狂了很多次，如果动画对元素没有影响，似乎就会发生这种情况。为了解决这个问题，在没有按预期触发事件处理程序的情况下使用超时来触发事件处理程序是有意义的。此处提供了有关此问题的博客文章:http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <-- 500 内部服务器错误

考虑到这一点，我倾向于在看起来有点像这样的代码块中使用此事件:

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

注意:要获取过渡事件结束名称，您可以使用作为答案发布的方法: How do I normalize CSS3 Transition functions across browsers? .

注意:这个问题还涉及到:- CSS3 transition events