如何检测 CSS 转换是否完成？

CSS 转换回调

查询：CSS 转换完成后能否收到通知？

解答：在支持回调的浏览器中，转换完成时会触发事件。该事件因浏览器而异：

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

WebKit TransitionEnd 问题

请注意 webkitTransitionEnd 可能并不总是触发。当动画对元素没有可见效果时，就会发生这种情况。要解决此问题，请考虑在事件未按预期触发时超时来触发事件处理程序。

推荐的代码结构

var transitionEndEventName = "XXX"; // Specify the appropriate event name
var elemToAnimate = ... // Element to be animated
var done = false;
var transitionEnded = function() {
    done = true;
    // Code to execute when transition finishes
    elemToAnimate.removeEventListener(transitionEndEventName, transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName, transitionEnded, false);

// Animation triggering code here

// Fallback for browsers without event notifications
setTimeout(function() {
    if (!done) {
        transitionEnded();
    }
}, XXX); // Calculate XXX based on animation time and grace period

注意: 请参阅“如何跨浏览器规范 CSS3 转换功能？”用于标准化转换事件名称。

以上是如何检测 CSS 转换是否完成？的详细内容。更多信息请关注PHP中文网其他相关文章！