getTransitionInfo() — vue Function Reference

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

Function typescript WebPlatform RuntimeModules calls 1 called by 1

Entity Profile

WebPlatform→ RuntimeModules→ getTransitionInfo() — vue Function Reference

Dependency Diagram

graph TD
  67ee7bcc_7bbc_0ec8_f207_3541819a38ef["getTransitionInfo()"]
  559a8e6b_5e4b_bfb9_73ff_310344cb5333["transition-util.ts"]
  67ee7bcc_7bbc_0ec8_f207_3541819a38ef -->|defined in| 559a8e6b_5e4b_bfb9_73ff_310344cb5333
  a91c7fdf_dfd4_ca46_afeb_f46ea34c1b98["whenTransitionEnds()"]
  a91c7fdf_dfd4_ca46_afeb_f46ea34c1b98 -->|calls| 67ee7bcc_7bbc_0ec8_f207_3541819a38ef
  f38b1b9f_e15e_00c9_f639_622e11e159cf["getTimeout()"]
  67ee7bcc_7bbc_0ec8_f207_3541819a38ef -->|calls| f38b1b9f_e15e_00c9_f639_622e11e159cf
  style 67ee7bcc_7bbc_0ec8_f207_3541819a38ef fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/runtime/transition-util.ts lines 123–193

export function getTransitionInfo(
  el: Element,
  expectedType?: string
): {
  type?: string | null
  propCount: number
  timeout: number
  hasTransform: boolean
} {
  const styles: any = window.getComputedStyle(el)
  // JSDOM may return undefined for transition properties
  const transitionDelays: Array<string> = (
    styles[transitionProp + 'Delay'] || ''
  ).split(', ')
  const transitionDurations: Array<string> = (
    styles[transitionProp + 'Duration'] || ''
  ).split(', ')
  const transitionTimeout: number = getTimeout(
    transitionDelays,
    transitionDurations
  )
  const animationDelays: Array<string> = (
    styles[animationProp + 'Delay'] || ''
  ).split(', ')
  const animationDurations: Array<string> = (
    styles[animationProp + 'Duration'] || ''
  ).split(', ')
  const animationTimeout: number = getTimeout(
    animationDelays,
    animationDurations
  )

  let type: string | undefined | null
  let timeout = 0
  let propCount = 0
  /* istanbul ignore if */
  if (expectedType === TRANSITION) {
    if (transitionTimeout > 0) {
      type = TRANSITION
      timeout = transitionTimeout
      propCount = transitionDurations.length
    }
  } else if (expectedType === ANIMATION) {
    if (animationTimeout > 0) {
      type = ANIMATION
      timeout = animationTimeout
      propCount = animationDurations.length
    }
  } else {
    timeout = Math.max(transitionTimeout, animationTimeout)
    type =
      timeout > 0
        ? transitionTimeout > animationTimeout
          ? TRANSITION
          : ANIMATION
        : null
    propCount = type
      ? type === TRANSITION
        ? transitionDurations.length
        : animationDurations.length
      : 0
  }
  const hasTransform: boolean =
    type === TRANSITION && transformRE.test(styles[transitionProp + 'Property'])
  return {
    type,
    timeout,
    propCount,
    hasTransform
  }
}