vue Architecture Docs
Home / File/ transition-util.ts — vue Source File

transition-util.ts — vue Source File

Architecture documentation for transition-util.ts, a typescript file in the vue codebase. 3 imports, 0 dependents.

File typescript WebPlatform RuntimeModules 3 imports 11 functions

Entity Profile

Dependency Diagram

graph LR
  559a8e6b_5e4b_bfb9_73ff_310344cb5333["transition-util.ts"]
  02e43f4a_da65_7acd_5a98_0f017554a159["index"]
  559a8e6b_5e4b_bfb9_73ff_310344cb5333 --> 02e43f4a_da65_7acd_5a98_0f017554a159
  ff375e44_6e1c_0904_3edd_3b2f66d92dca["class-util"]
  559a8e6b_5e4b_bfb9_73ff_310344cb5333 --> ff375e44_6e1c_0904_3edd_3b2f66d92dca
  156bf2e1_8a13_f22d_5437_54f14bcef8fa["util"]
  559a8e6b_5e4b_bfb9_73ff_310344cb5333 --> 156bf2e1_8a13_f22d_5437_54f14bcef8fa
  style 559a8e6b_5e4b_bfb9_73ff_310344cb5333 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { inBrowser, isIE9 } from 'core/util/index'
import { addClass, removeClass } from 'web/runtime/class-util'
import { remove, extend, cached } from 'shared/util'

export function resolveTransition(
  def?: string | Record<string, any>
): Record<string, any> | undefined {
  if (!def) {
    return
  }
  /* istanbul ignore else */
  if (typeof def === 'object') {
    const res = {}
    if (def.css !== false) {
      extend(res, autoCssTransition(def.name || 'v'))
    }
    extend(res, def)
    return res
  } else if (typeof def === 'string') {
    return autoCssTransition(def)
  }
}

const autoCssTransition: (name: string) => Object = cached(name => {
  return {
    enterClass: `${name}-enter`,
    enterToClass: `${name}-enter-to`,
    enterActiveClass: `${name}-enter-active`,
    leaveClass: `${name}-leave`,
    leaveToClass: `${name}-leave-to`,
    leaveActiveClass: `${name}-leave-active`
  }
})

export const hasTransition = inBrowser && !isIE9
const TRANSITION = 'transition'
const ANIMATION = 'animation'

// Transition property/event sniffing
export let transitionProp = 'transition'
export let transitionEndEvent = 'transitionend'
export let animationProp = 'animation'
export let animationEndEvent = 'animationend'
if (hasTransition) {
  /* istanbul ignore if */
  if (
    window.ontransitionend === undefined &&
    window.onwebkittransitionend !== undefined
  ) {
    transitionProp = 'WebkitTransition'
    transitionEndEvent = 'webkitTransitionEnd'
  }
  if (
    window.onanimationend === undefined &&
    window.onwebkitanimationend !== undefined
  ) {
    animationProp = 'WebkitAnimation'
    animationEndEvent = 'webkitAnimationEnd'
  }
}
// ... (156 more lines)

Domain

Subdomains

Functions

Dependencies

  • class-util
  • index
  • util

Source

Frequently Asked Questions

What does transition-util.ts do?
transition-util.ts is a source file in the vue codebase, written in typescript. It belongs to the WebPlatform domain, RuntimeModules subdomain.
What functions are defined in transition-util.ts?
transition-util.ts defines 11 function(s): Object, addTransitionClass, autoCssTransition, getTimeout, getTransitionInfo, nextFrame, raf, removeTransitionClass, resolveTransition, toMs, and 1 more.
What does transition-util.ts depend on?
transition-util.ts imports 3 module(s): class-util, index, util.
Where is transition-util.ts in the architecture?
transition-util.ts is located at src/platforms/web/runtime/transition-util.ts (domain: WebPlatform, subdomain: RuntimeModules, directory: src/platforms/web/runtime).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free