当 CSS 转换在不同浏览器之间完成时，如何收到通知？

CSS 转换完成的通知

CSS 转换结束时，接收启动转换后操作的通知非常有价值。幸运的是，浏览器提供了在转换完成时触发的事件，允许开发人员注册回调函数。

浏览器特定的事件名称

但是，浏览器使用依赖于浏览器的事件名称：

• Webkit 浏览器（Chrome、Safari）：webkitTransitionEnd
• Firefox： transitionend
• IE9 : msTransitionEnd
• Opera: oTransitionEnd

webkitTransitionEnd 陷阱

请注意，webkitTransitionEnd 可能并不总是触发，特别是当动画效果没有对元素有明显的影响。为了缓解这种情况，如果事件处理程序未按预期触发，请使用超时来执行该事件处理程序。

代码示例

以下代码演示了此事件的用法：

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) 

浏览器兼容性说明

要确定特定浏览器的适当转换事件名称，请使用“如何标准化CSS3 跨浏览器转换功能？”。

以上是当 CSS 转换在不同浏览器之间完成时，如何收到通知？的详细内容。更多信息请关注PHP中文网其他相关文章！