leave() — vue Function Reference

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

Function typescript WebPlatform RuntimeModules calls 3 called by 1

Entity Profile

WebPlatform→ RuntimeModules→ leave() — vue Function Reference

Dependency Diagram

graph TD
  755e8a88_aa58_e408_b321_a376fb0706e8["leave()"]
  9054be9b_2c50_137b_ab18_88c14104b006["transition.ts"]
  755e8a88_aa58_e408_b321_a376fb0706e8 -->|defined in| 9054be9b_2c50_137b_ab18_88c14104b006
  286e73b1_9a1f_0e50_cd53_1854d8972300["default.remove()"]
  286e73b1_9a1f_0e50_cd53_1854d8972300 -->|calls| 755e8a88_aa58_e408_b321_a376fb0706e8
  c6f121f8_7674_0a18_9296_a291b5e06c4e["getHookArgumentsLength()"]
  755e8a88_aa58_e408_b321_a376fb0706e8 -->|calls| c6f121f8_7674_0a18_9296_a291b5e06c4e
  b0759915_6b10_041f_5114_4d9bd88aef97["checkDuration()"]
  755e8a88_aa58_e408_b321_a376fb0706e8 -->|calls| b0759915_6b10_041f_5114_4d9bd88aef97
  8469294c_4d54_83cd_55d5_e40756425fa2["isValidDuration()"]
  755e8a88_aa58_e408_b321_a376fb0706e8 -->|calls| 8469294c_4d54_83cd_55d5_e40756425fa2
  style 755e8a88_aa58_e408_b321_a376fb0706e8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/runtime/modules/transition.ts lines 169–275

export function leave(vnode: VNodeWithData, rm: Function) {
  const el: any = vnode.elm

  // call enter callback now
  if (isDef(el._enterCb)) {
    el._enterCb.cancelled = true
    el._enterCb()
  }

  const data = resolveTransition(vnode.data.transition)
  if (isUndef(data) || el.nodeType !== 1) {
    return rm()
  }

  /* istanbul ignore if */
  if (isDef(el._leaveCb)) {
    return
  }

  const {
    css,
    type,
    leaveClass,
    leaveToClass,
    leaveActiveClass,
    beforeLeave,
    leave,
    afterLeave,
    leaveCancelled,
    delayLeave,
    duration
  } = data

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

  const explicitLeaveDuration: any = toNumber(
    isObject(duration) ? duration.leave : duration
  )

  if (__DEV__ && isDef(explicitLeaveDuration)) {
    checkDuration(explicitLeaveDuration, 'leave', vnode)
  }

  const cb = (el._leaveCb = once(() => {
    if (el.parentNode && el.parentNode._pending) {
      el.parentNode._pending[vnode.key!] = null
    }
    if (expectsCSS) {
      removeTransitionClass(el, leaveToClass)
      removeTransitionClass(el, leaveActiveClass)
    }
    // @ts-expect-error
    if (cb.cancelled) {
      if (expectsCSS) {
        removeTransitionClass(el, leaveClass)
      }
      leaveCancelled && leaveCancelled(el)
    } else {
      rm()
      afterLeave && afterLeave(el)
    }
    el._leaveCb = null
  }))

  if (delayLeave) {
    delayLeave(performLeave)
  } else {
    performLeave()
  }

  function performLeave() {
    // the delayed leave may have already been cancelled
    // @ts-expect-error
    if (cb.cancelled) {
      return
    }
    // record leaving element
    if (!vnode.data.show && el.parentNode) {
      ;(el.parentNode._pending || (el.parentNode._pending = {}))[vnode.key!] =
        vnode