Skip to main content

transitionend

transitionend 事件会在 CSS transition 结束后触发. 当 transition 完成前移除 transition 时，比如移除 css 的 transition-property 属性，事件将不会被触发.如在 transition 完成前设置 display 为"none"，事件同样不会被触发。

Examples​

/*
 * 在指定的元素上监听transitionend事件, 例如#slidingMenu
 * 然后指定一个函数, 例如 showMessage()
 */
function showMessage() {
  console.log("Transition 已完成");
}

var element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", showMessage, false);

注意​

在 js 调用中；transitionend 存几个个问题：

  • 如果 transition 中：变换的属性有多个 ；比如设置宽高 过度（transition :width:.2s,height:.2s）, transitionend 事件会促发 2 次

  • 如果 transition 中：变换的属性 (transition :width:.1s)；transitionend 之后再次改变 宽度； 再次促发 ；transitionend 类似递归

参考​