default.updated() — vue Function Reference

Architecture documentation for the default.updated() function in transition-group.ts from the vue codebase.

Function typescript WebPlatform WebRuntime

Entity Profile

WebPlatform→ WebRuntime→ default.updated() — vue Function Reference

Dependency Diagram

graph TD
  67d4f7ad_e122_b306_8b22_a400ab7c6d06["default.updated()"]
  f7026368_bf6f_2dd0_00ce_f887a9165898["transition-group.ts"]
  67d4f7ad_e122_b306_8b22_a400ab7c6d06 -->|defined in| f7026368_bf6f_2dd0_00ce_f887a9165898
  style 67d4f7ad_e122_b306_8b22_a400ab7c6d06 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/runtime/components/transition-group.ts lines 104–143

  updated() {
    const children: Array<VNodeWithData> = this.prevChildren
    const moveClass: string = this.moveClass || (this.name || 'v') + '-move'
    if (!children.length || !this.hasMove(children[0].elm, moveClass)) {
      return
    }

    // we divide the work into three loops to avoid mixing DOM reads and writes
    // in each iteration - which helps prevent layout thrashing.
    children.forEach(callPendingCbs)
    children.forEach(recordPosition)
    children.forEach(applyTranslation)

    // force reflow to put everything in position
    // assign to this to avoid being removed in tree-shaking
    // $flow-disable-line
    this._reflow = document.body.offsetHeight

    children.forEach((c: VNode) => {
      if (c.data!.moved) {
        const el: any = c.elm
        const s: any = el.style
        addTransitionClass(el, moveClass)
        s.transform = s.WebkitTransform = s.transitionDuration = ''
        el.addEventListener(
          transitionEndEvent,
          (el._moveCb = function cb(e) {
            if (e && e.target !== el) {
              return
            }
            if (!e || /transform$/.test(e.propertyName)) {
              el.removeEventListener(transitionEndEvent, cb)
              el._moveCb = null
              removeTransitionClass(el, moveClass)
            }
          })
        )
      }
    })
  },