CSS 转换回调
查询：CSS 转换完成后能否收到通知？
解答：在支持回调的浏览器中，转换完成时会触发事件。该事件因浏览器而异：
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中文网其他相关文章！
