leave() — vue Function Reference

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

Function typescript WebPlatform WebRuntime calls 3 called by 1

Entity Profile

WebPlatform→ WebRuntime→ leave() — vue Function Reference

Dependency Diagram

graph TD
  9f2f50fa_9a37_3be6_7a60_2ae854f23afc["leave()"]
  4d46ad51_46f5_2e09_4e74_85f233ccffed["transition.ts"]
  9f2f50fa_9a37_3be6_7a60_2ae854f23afc -->|defined in| 4d46ad51_46f5_2e09_4e74_85f233ccffed
  0747a05d_63dc_10f8_5f91_830a8d97fd14["default.remove()"]
  0747a05d_63dc_10f8_5f91_830a8d97fd14 -->|calls| 9f2f50fa_9a37_3be6_7a60_2ae854f23afc
  e81fb0ad_1039_a8c5_0f85_067da2e9a50c["getHookArgumentsLength()"]
  9f2f50fa_9a37_3be6_7a60_2ae854f23afc -->|calls| e81fb0ad_1039_a8c5_0f85_067da2e9a50c
  8b2c220c_0f54_5bed_b497_d59894b7adad["checkDuration()"]
  9f2f50fa_9a37_3be6_7a60_2ae854f23afc -->|calls| 8b2c220c_0f54_5bed_b497_d59894b7adad
  feb6461a_0fcc_1356_a500_74857688051d["isValidDuration()"]
  9f2f50fa_9a37_3be6_7a60_2ae854f23afc -->|calls| feb6461a_0fcc_1356_a500_74857688051d
  style 9f2f50fa_9a37_3be6_7a60_2ae854f23afc 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