Run js until css transition completed

写代码的时候我们可能会经常碰到需要在某个元素的动画完成后再执行某些代码的场景，这时，我们就需要用到 transitionend 事件。

使用的方法也相当简单：

const listener = () => {

  // do something...

}


document.querySelector('#menu').addEventListener('transitionend', listener)

需要注意的两点：

• 如果 transition 是针对多个属性的，则该事件会被触发多次

• 如果被监听元素的子元素样式也有 transition 属性，那么该监听也会被子元素的 transitionend 事件触发

针对第 2 点，我们可以这样做：

const listener = () => {

  if (ev.currentTarget !== ev.target) return

  // do something...

}

document.querySelector('#menu').addEventListener('transitionend', listener)

针对第 1 点，我们可以使用闭包解决问题：

// only fired once
const listener = function () {

  let flag = false

  return function (ev) {

    if (flag) return

    if (ev.currentTarget !== this) return

    flag = true

    console.log(ev.currentTarget)

  }

}

document.querySelector('#menu').addEventListener('transitionend', listener())

refs:

• Transition events https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement#Transition_events

• HTMLElement: transitionend event https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event