enter() — vue Function Reference

Architecture documentation for the enter() function in transition.ts from the vue codebase.

Function typescript WebPlatform WebRuntime calls 3 called by 1

Entity Profile

WebPlatform→ WebRuntime→ enter() — vue Function Reference

Dependency Diagram

graph TD
  aff958ec_f8bd_7b1b_435a_dbec64ddb377["enter()"]
  4d46ad51_46f5_2e09_4e74_85f233ccffed["transition.ts"]
  aff958ec_f8bd_7b1b_435a_dbec64ddb377 -->|defined in| 4d46ad51_46f5_2e09_4e74_85f233ccffed
  9b4077f9_dbaa_ca91_f19b_03ef2f8356b1["_enter()"]
  9b4077f9_dbaa_ca91_f19b_03ef2f8356b1 -->|calls| aff958ec_f8bd_7b1b_435a_dbec64ddb377
  8b2c220c_0f54_5bed_b497_d59894b7adad["checkDuration()"]
  aff958ec_f8bd_7b1b_435a_dbec64ddb377 -->|calls| 8b2c220c_0f54_5bed_b497_d59894b7adad
  e81fb0ad_1039_a8c5_0f85_067da2e9a50c["getHookArgumentsLength()"]
  aff958ec_f8bd_7b1b_435a_dbec64ddb377 -->|calls| e81fb0ad_1039_a8c5_0f85_067da2e9a50c
  feb6461a_0fcc_1356_a500_74857688051d["isValidDuration()"]
  aff958ec_f8bd_7b1b_435a_dbec64ddb377 -->|calls| feb6461a_0fcc_1356_a500_74857688051d
  style aff958ec_f8bd_7b1b_435a_dbec64ddb377 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/runtime/modules/transition.ts lines 25–167

export function enter(vnode: VNodeWithData, toggleDisplay?: () => void) {
  const el: any = vnode.elm

  // call leave callback now
  if (isDef(el._leaveCb)) {
    el._leaveCb.cancelled = true
    el._leaveCb()
  }

  const data = resolveTransition(vnode.data.transition)
  if (isUndef(data)) {
    return
  }

  /* istanbul ignore if */
  if (isDef(el._enterCb) || el.nodeType !== 1) {
    return
  }

  const {
    css,
    type,
    enterClass,
    enterToClass,
    enterActiveClass,
    appearClass,
    appearToClass,
    appearActiveClass,
    beforeEnter,
    enter,
    afterEnter,
    enterCancelled,
    beforeAppear,
    appear,
    afterAppear,
    appearCancelled,
    duration
  } = data

  // activeInstance will always be the <transition> component managing this
  // transition. One edge case to check is when the <transition> is placed
  // as the root node of a child component. In that case we need to check
  // <transition>'s parent for appear check.
  let context = activeInstance
  let transitionNode = activeInstance.$vnode
  while (transitionNode && transitionNode.parent) {
    context = transitionNode.context
    transitionNode = transitionNode.parent
  }

  const isAppear = !context._isMounted || !vnode.isRootInsert

  if (isAppear && !appear && appear !== '') {
    return
  }

  const startClass = isAppear && appearClass ? appearClass : enterClass
  const activeClass =
    isAppear && appearActiveClass ? appearActiveClass : enterActiveClass
  const toClass = isAppear && appearToClass ? appearToClass : enterToClass

  const beforeEnterHook = isAppear ? beforeAppear || beforeEnter : beforeEnter
  const enterHook = isAppear ? (isFunction(appear) ? appear : enter) : enter
  const afterEnterHook = isAppear ? afterAppear || afterEnter : afterEnter
  const enterCancelledHook = isAppear
    ? appearCancelled || enterCancelled
    : enterCancelled

  const explicitEnterDuration: any = toNumber(
    isObject(duration) ? duration.enter : duration
  )

  if (__DEV__ && explicitEnterDuration != null) {
    checkDuration(explicitEnterDuration, 'enter', vnode)
  }

  const expectsCSS = css !== false && !isIE9
  const userWantsControl = getHookArgumentsLength(enterHook)

  const cb = (el._enterCb = once(() => {
    if (expectsCSS) {