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

CSS Transition 回调

问题：

是否可以在以下情况下收到通知CSS 过渡有完成？

答案：

是的，如果浏览器支持，当转换结束时会触发一个事件。不过，具体事件因浏览器而异：

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

其他注意事项：

• webkitTransitionEnd 可能并不总是触发，特别是当动画对元素没有影响时。
• 建议使用超时回退，以确保事件处理程序被调用，以防事件未按如下方式触发

代码示例：

const transitionEndEventName = "XXX"; // Determine the appropriate event name
const elemToAnimate = ...; // Element to animate
let done = false;
const transitionEnded = () => {
  done = true;
  // Transition finished actions
  elemToAnimate.removeEventListener(transitionEndEventName, transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName, transitionEnded, false);

// Trigger animation

setTimeout(() => {
  if (!done) {
    console.log("Timeout required to call transition ended.");
    transitionEnded();
  }
}, XXX); // Replace XXX with animation duration plus a grace period

注意：

• 转换事件结束可以使用“如何规范化 CSS3 转换函数”的答案中讨论的方法来获取名称浏览器？”
• 此问题也与“CSS3 转换事件”有关。

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