enter() — vue Function Reference

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

Function typescript WebPlatform RuntimeModules calls 3 called by 1

Entity Profile

WebPlatform→ RuntimeModules→ enter() — vue Function Reference

Dependency Diagram

graph TD
  5e37a19f_afa0_336d_f8ac_7a3188ea138b["enter()"]
  9054be9b_2c50_137b_ab18_88c14104b006["transition.ts"]
  5e37a19f_afa0_336d_f8ac_7a3188ea138b -->|defined in| 9054be9b_2c50_137b_ab18_88c14104b006
  2e39f5fe_eb5d_d64f_5af5_c6f10408a71d["_enter()"]
  2e39f5fe_eb5d_d64f_5af5_c6f10408a71d -->|calls| 5e37a19f_afa0_336d_f8ac_7a3188ea138b
  b0759915_6b10_041f_5114_4d9bd88aef97["checkDuration()"]
  5e37a19f_afa0_336d_f8ac_7a3188ea138b -->|calls| b0759915_6b10_041f_5114_4d9bd88aef97
  c6f121f8_7674_0a18_9296_a291b5e06c4e["getHookArgumentsLength()"]
  5e37a19f_afa0_336d_f8ac_7a3188ea138b -->|calls| c6f121f8_7674_0a18_9296_a291b5e06c4e
  8469294c_4d54_83cd_55d5_e40756425fa2["isValidDuration()"]
  5e37a19f_afa0_336d_f8ac_7a3188ea138b -->|calls| 8469294c_4d54_83cd_55d5_e40756425fa2
  style 5e37a19f_afa0_336d_f8ac_7a3188ea138b 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) {