动画事件

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

• animationstart
• animationiteration
• animationend
• animationcancell

  useEffect(() => {
    const domActive = document.getElementById(`text-${activeKey}`);
    if (domActive) {
      domActive.addEventListener('animationend', handleToNext);
      return () => {
        domActive.removeEventListener('animationend', handleToNext);
      };
    }
  }, [activeKey]);

transitionend

https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ontransitionend

transitionend (en-US) 事件的事件处理函数，在某个 CSS transition (opens new window) 完成时触发。

如果在 transition 完成前，该 transition 已从目标节点上移除，那么 transitionend (en-US) 将不会被触发。一种可能的情况是修改了目标节点的 transition-property (opens new window) 属性，另一种可能的情况是 display (opens new window) 属性被设为 "none"。

表示目标节点的 CSS transition 已经完成。目标节点可能是一个 HTML 元素 (HTMLElement (opens new window))，document (Document (opens new window))，或者 window (Window (opens new window))

let box = document.querySelector(".box");
box.ontransitionrun = function(event) {
  box.innerHTML = "Zooming...";
}
box.ontransitionend = function(event) {
  box.innerHTML = "Done!";
}

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

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

const message = document.querySelector('.message');
const el = document.querySelector('.transition');

el.addEventListener('transitionrun', function() {
  message.textContent = 'transitionrun fired';
});

el.addEventListener('transitionstart', function() {
  message.textContent = 'transitionstart fired';
});

el.addEventListener('transitioncancel', function() {
  message.textContent = 'transitioncancel fired';
});

el.addEventListener('transitionend', function() {
  message.textContent = 'transitionend fired';
});