whenTransitionEnds() — vue Function Reference

Architecture documentation for the whenTransitionEnds() function in transition-util.ts from the vue codebase.

Function typescript WebPlatform RuntimeDirectives calls 1 called by 2

Entity Profile

WebPlatform→ RuntimeDirectives→ whenTransitionEnds() — vue Function Reference

Dependency Diagram

graph TD
  b0ac5a9d_fe65_cc6b_d3b8_471b476ba8f0["whenTransitionEnds()"]
  ba54cdc9_f934_43fb_f1d2_3319595d4c1d["enter()"]
  ba54cdc9_f934_43fb_f1d2_3319595d4c1d -->|calls| b0ac5a9d_fe65_cc6b_d3b8_471b476ba8f0
  bb5c970d_2e75_b59b_6ddf_fe4f60d2e887["leave()"]
  bb5c970d_2e75_b59b_6ddf_fe4f60d2e887 -->|calls| b0ac5a9d_fe65_cc6b_d3b8_471b476ba8f0
  9d996f4e_65c0_f804_9740_00c0bf87f3c8["getTransitionInfo()"]
  b0ac5a9d_fe65_cc6b_d3b8_471b476ba8f0 -->|calls| 9d996f4e_65c0_f804_9740_00c0bf87f3c8
  style b0ac5a9d_fe65_cc6b_d3b8_471b476ba8f0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/runtime/transition-util.ts lines 92–119

export function whenTransitionEnds(
  el: Element,
  expectedType: string | undefined,
  cb: Function
) {
  const { type, timeout, propCount } = getTransitionInfo(el, expectedType)
  if (!type) return cb()
  const event: string =
    type === TRANSITION ? transitionEndEvent : animationEndEvent
  let ended = 0
  const end = () => {
    el.removeEventListener(event, onEnd)
    cb()
  }
  const onEnd = e => {
    if (e.target === el) {
      if (++ended >= propCount) {
        end()
      }
    }
  }
  setTimeout(() => {
    if (ended < propCount) {
      end()
    }
  }, timeout + 1)
  el.addEventListener(event, onEnd)
}