Vue.js 源碼學習九 —— 過渡效果 transition 學習

時間  2019-12-04
標籤 vue.js vue 源碼 學習 過渡 效果 transition 欄目 JavaScript 简体版
原文   原文鏈接
在學習 element ui 時，發現組件的過渡用的是 Vue.js 提供的 <transition> 標籤。這裏來好好認識下 vue 的過渡究竟是如何工做的。

簡介

廢話很少說，詳細的內容請看官方文檔，裏面有詳細的分析和例子夠你看懂了（就是費時間~）。簡單說說我對 vue 過渡的理解。通過一下午的折騰，總結出如下幾點：css

  • 有四種狀況會觸發過渡效果：
    1 v-if
    2 v-show
    3 動態組件（如 component 的 is 屬性）
    4 組件根節點發生變化（如 v-if v-else 切換根節點）
  • 過渡效果 CSS 命名規律：（name 屬性，默認爲 v）-（行爲：enter、leave、appear、move）-（階段：無、active、to）
  • 有三種方式來設置過渡樣式：
    1 爲 <transition> 標籤設定 name 屬性。
    2 在 <transition> 標籤中插入 enter-active-class 等設置自定義過渡類名。
    3 使用 JavaScript 在過渡的鉤子處修改過渡樣式。
  • 我的理解：<transition> 標籤用於單個元素的進入和離開效果。<transition-group> 標籤用於處理如 v-for 遍歷這樣多個元素的過渡動畫。

本身實現個過渡方法

先來兩個簡單例子理解下 transition（爲了節省篇幅和便於查看寫在 JSFiddle 中）有興趣的朋友能夠看下~
例1：v-enter 和 v-leave 簡單實現
例2：v-move 簡單實現html

transition 學習

1. 基本原理是什麼？

基本原理仍是 CSS3 的 transition、transform、animation 這幾個屬性。用戶定義過渡效果，Vue.js 進行處理。下面咱們經過 <transition> 過渡的進入的過程看一下：vue

  • 插入元素
  • 解析 <transition> 標籤，獲取對應的過渡類名。這裏默認就 v- 開頭了。
  • 爲元素定義 v-enter 和 v-enter-active 兩個類。class="v-enter v-enter-active"。
  • 下一幀移除 v-enter，添加 v-enter-to。class="v-enter-active v-enter-to"。
  • 獲取過渡時間，延時執行回調函數。
  • 回調函數中移除 v-enter、v-enter-active 和 v-enter-to 的這些過渡類名，完成過渡。
  • 在整個過程當中調用了 beforeEnterHook 、enterHook、afterEnterHook、enterCancelledHook 四個函數，執行相應的 JavaScript 鉤子。

下面是 enter 函數的代碼及註釋：node

// 進入過渡效果
export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
  const el: any = vnode.elm

  // call leave callback now 執行 leave 回調函數
  if (isDef(el._leaveCb)) {
    el._leaveCb.cancelled = true
    el._leaveCb()
  }

  // 解析 transition 的數據（class、tag、name等）
  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

  // 將做爲子組件的根節點放置時，咱們須要檢查 <transition> 的父元素是否出現檢查。
  let context = activeInstance
  let transitionNode = activeInstance.$vnode
  while (transitionNode && transitionNode.parent) {
    transitionNode = transitionNode.parent
    context = transitionNode.context
  }

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

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

  // 獲取進入的 class
  // v-enter
  const startClass = isAppear && appearClass
    ? appearClass
    : enterClass
  // v-enter-active
  const activeClass = isAppear && appearActiveClass
    ? appearActiveClass
    : enterActiveClass
  // v-enter-to
  const toClass = isAppear && appearToClass
    ? appearToClass
    : enterToClass

  // 4個生命週期鉤子函數
  const beforeEnterHook = isAppear
    ? (beforeAppear || beforeEnter)
    : beforeEnter
  const enterHook = isAppear
    ? (typeof appear === 'function' ? appear : enter)
    : enter
  const afterEnterHook = isAppear
    ? (afterAppear || afterEnter)
    : afterEnter
  const enterCancelledHook = isAppear
    ? (appearCancelled || enterCancelled)
    : enterCancelled

  // https://cn.vuejs.org/v2/guide/transitions.html#顯性的過渡持續時間
  const explicitEnterDuration: any = toNumber(
    isObject(duration)
      ? duration.enter
      : duration
  )

  if (process.env.NODE_ENV !== 'production' && explicitEnterDuration != null) {
    checkDuration(explicitEnterDuration, 'enter', vnode)
  }

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

  // 完成進入過渡後的回調函數
  const cb = el._enterCb = once(() => {
    if (expectsCSS) {
      // 移除 v-enter-to 和 v-enter-active
      removeTransitionClass(el, toClass)
      removeTransitionClass(el, activeClass)
    }
    if (cb.cancelled) {
      if (expectsCSS) {
        // 移除 v-enter
        removeTransitionClass(el, startClass)
      }
      // 調用 enter-cancelled
      enterCancelledHook && enterCancelledHook(el)
    } else {
      afterEnterHook && afterEnterHook(el)
    }
    el._enterCb = null
  })

  if (!vnode.data.show) {
    // 經過注入一個 insert 鉤子，將待處理的 leave 元素移除。
    mergeVNodeHook(vnode, 'insert', () => {
      const parent = el.parentNode
      const pendingNode = parent && parent._pending && parent._pending[vnode.key]
      if (pendingNode &&
        pendingNode.tag === vnode.tag &&
        pendingNode.elm._leaveCb
      ) {
        pendingNode.elm._leaveCb()
      }
      enterHook && enterHook(el, cb)
    })
  }

  // start enter transition
  beforeEnterHook && beforeEnterHook(el)
  // 預期 CSS
  if (expectsCSS) {
    // 添加 v-enter v-enter-active
    addTransitionClass(el, startClass)
    addTransitionClass(el, activeClass)
    // 下一幀
    nextFrame(() => {
      // 移除 v-enter
      removeTransitionClass(el, startClass)
      if (!cb.cancelled) {
        // 添加 v-enter-to
        addTransitionClass(el, toClass)
        if (!userWantsControl) {
          // 預期進入時間
          if (isValidDuration(explicitEnterDuration)) {
            setTimeout(cb, explicitEnterDuration)
          } else {
            // 當 transition 結束
            whenTransitionEnds(el, type, cb)
          }
        }
      }
    })
  }

  if (vnode.data.show) {
    toggleDisplay && toggleDisplay()
    enterHook && enterHook(el, cb)
  }

  if (!expectsCSS && !userWantsControl) {
    cb()
  }
}

2. 過渡的類名和自定義過渡的類名如何用於 <transition> 中？

在 <transition> 中一共有以下屬性（props）：git

export const transitionProps = {
  name: String,
  appear: Boolean,
  css: Boolean,
  mode: String,
  type: String,
  enterClass: String,
  leaveClass: String,
  enterToClass: String,
  leaveToClass: String,
  enterActiveClass: String,
  leaveActiveClass: String,
  appearClass: String,
  appearActiveClass: String,
  appearToClass: String,
  duration: [Number, String, Object]
}

能夠看到其中就有這些自定義過渡類名，如 enterClass。這些屬性如被傳入到 <transition> 子組件的 data.transition 對象中。github

// extractTransitionData 函數返回組件的全部 propsData 和 listener
    const data: Object = (child.data || (child.data = {})).transition = extractTransitionData(this)

而這個 data.transition 對象在 enter 函數中用到：web

const data = resolveTransition(vnode.data.transition)

resolveTransition 函數：api

// 解析 transition 過渡 CSS
export function resolveTransition (def?: string | Object): ?Object {
  if (!def) {
    return
  }
  // 合併過渡類名和自定義過渡類名
  if (typeof def === 'object') {
    const res = {}
    if (def.css !== false) {
      // 使用 name，默認爲 v
      extend(res, autoCssTransition(def.name || 'v'))
    }
    extend(res, def)
    return res
  } else if (typeof def === 'string') {
    return autoCssTransition(def)
  }
}
// 經過 name 屬性獲取過渡 CSS 類名
const autoCssTransition: (name: string) => Object = cached(name => {
  return {
    enterClass: `${name}-enter`,
    enterToClass: `${name}-enter-to`,
    enterActiveClass: `${name}-enter-active`,
    leaveClass: `${name}-leave`,
    leaveToClass: `${name}-leave-to`,
    leaveActiveClass: `${name}-leave-active`
  }
})

resolveTransition 函數合併了過渡類名和自定義過渡類名，返回最終的過渡類名。以後就是使用這些類名來實現過渡動畫。
PS：從源碼中能夠知道自定義過渡類名要優先於 name 定義的過渡類名。
小結一下就是：Vue.js 經過 <transition> 的 props 獲取自定義過渡類名，經過 <transition> 的 name 屬性解析獲取過渡類名，二者合併成爲最終過渡類名，用以實現過渡效果。數組

3. JavaScript 鉤子如何實現？

從 enter 函數中能夠知道，在特定時間點會調用指定 JavaScript 鉤子函數，因此咱們只需綁定好函數便可按時間點觸發。像這樣：瀏覽器

enterHook && enterHook(el, cb)

4. transition 組件和 transition-group 標籤的基本原理是什麼？

其實就是 Vue.js 的組件，在其中實現了過渡效果而已。
transition 中只能包含一個子元素，標籤經過 render 函數來渲染子元素（不渲染自身，因此咱們在 DOM 中看不到 transition 節點）。主要用於控制元素的進入和離開，當元素離開後元素就從 DOM 中移除了。
transition-group 能夠包含多個子元素，也是用 render 函數，渲染爲指定標籤名的元素。相比 transition 多了一個 v-move 屬性用於控制多個組件間的移動速度。

5. v-if、v-show、component 等組件變化如何監聽？

在使用 v-if、v-else 和 component 切換組件的時候，v-if、v-else 須要傳入 key 以區分相同標籤的不一樣元素。而 component 標籤不須要。在代碼中會解析 key 和 component 名組成新的 key，因此兩個不一樣的 component 也會擁有不一樣的 key 實現切換效果。

var id = "__transition-" + (this._uid) + "-";
    child.key = child.key == null
      ? child.isComment
        ? id + 'comment'
        : id + child.tag
      : isPrimitive(child.key)
        ? (String(child.key).indexOf(id) === 0 ? child.key : id + child.key)
        : child.key;

而對於 v-show，作了特殊標記 —— 當有 v-show 指令時標記 child.data.show 爲 true：

if (child.data.directives && child.data.directives.some(d => d.name === 'show')) {
      child.data.show = true
    }

以後再過渡的邏輯中對 v-show 作了些處理，實現過渡效果。
同時，在 v-show 的源碼 src/platforms/web/runtime/directives/show.js 中對於 transition 也作了一些處理。好比在 update 方法中獲取 transition，若是有過渡則 v-show 使用過渡效果，不然使用 style.display 來隱藏元素。

update (el: any, { value, oldValue }: VNodeDirective, vnode: VNodeWithData) {
    if (value === oldValue) return
    vnode = locateNode(vnode)
    // 過渡效果
    const transition = vnode.data && vnode.data.transition
    if (transition) {
      vnode.data.show = true
      if (value) {
        enter(vnode, () => {
          el.style.display = el.__vOriginalDisplay
        })
      } else {
        leave(vnode, () => {
          el.style.display = 'none'
        })
      }
    } else {
      // 隱藏
      el.style.display = value ? el.__vOriginalDisplay : 'none'
    }
  },

6. transition 中兩個相同標籤的組件爲什麼要用 key 分開？

使用 key 和 tagName 來判斷是否爲同一個節點。

function isSameChild (child: VNode, oldChild: VNode): boolean {
  return oldChild.key === child.key && oldChild.tag === child.tag
}

8. 過渡邏輯和過渡組件如何做用於一塊兒

在源碼中有四個過渡相關的源碼：

  • src/platforms/web/runtime/components/transition.js <transition> 組件源碼。
  • src/platforms/web/runtime/components/transition-group.js <transition-group> 組件源碼
  • src/platforms/web/runtime/transition-util.js 過渡工具代碼。
  • src/platforms/web/runtime/modules/transition.js 過渡邏輯代碼。

前三個很好理解，最後一個 transition.js 實際上是在 patch 方法中和 v-show 中使用的~

// src/platforms/web/runtime/directives/show.js
import { enter, leave } from '../modules/transition'

v-show 中調用了 transition 的 enter 和 leave 函數，在 v-show 做用於過渡效果時調用。
另一個使用的地方比較隱蔽，先來看看 transition.js 導出的內容：

// src/platforms/web/runtime/modules/transition.js
function _enter (_: any, vnode: VNodeWithData) {
  if (vnode.data.show !== true) {
    enter(vnode)
  }
}

export default inBrowser ? {
  create: _enter,
  activate: _enter,
  remove (vnode: VNode, rm: Function) {
    /* istanbul ignore else */
    if (vnode.data.show !== true) {
      leave(vnode, rm)
    } else {
      rm()
    }
  }
} : {}

這裏講 enter 和 leave 函數在方法中使用並導出（若是是瀏覽器的話）。繼續往下找：

// src/platforms/web/runtime/modules/index.js
import transition from './transition'

導入到 modules 文件夾 index.js，index.js 在 patch.js 中使用了。

// src/platforms/web/runtime/patch.js
import * as nodeOps from 'web/runtime/node-ops'
import { createPatchFunction } from 'core/vdom/patch'
import baseModules from 'core/vdom/modules/index'
import platformModules from 'web/runtime/modules/index'

const modules = platformModules.concat(baseModules)
export const patch: Function = createPatchFunction({ nodeOps, modules })

在此處合併 modules，而且建立了 patch 方法。這個 patch 方法在以前寫的Vue.js 源碼學習六 —— VNode虛擬DOM學習中提到過，用於對比虛擬 DOM，實現差別化更新。
能夠看下 modules 在 createPatchFunction 方法中作了些什麼？

const hooks = ['create', 'activate', 'update', 'remove', 'destroy']

export function createPatchFunction (backend) {
  let i, j
  const cbs = {}

  const { modules, nodeOps } = backend

  for (i = 0; i < hooks.length; ++i) {
    cbs[hooks[i]] = []
    for (j = 0; j < modules.length; ++j) {
      if (isDef(modules[j][hooks[i]])) {
        cbs[hooks[i]].push(modules[j][hooks[i]])
      }
    }
  }
  ...
}

這裏能夠發現 transition.js 中導出的 create、activate 和 remove 方法都是 patch 的生命週期函數。也就是說當元素建立、激活、移除行爲時就會執行 transition.js 中的邏輯，而 <transition> 和 <transition-group> 組件都會有組件的這些行爲。Vue.js 很巧妙的將組件相關行爲都交給了 patch 的生命週期去處理，學習了！

8. 過渡模式 mode 的實現原理是啥

在 <transition> 組件的 render 函數中有這麼一段：

// 控制離開/進入的過渡時間序列。有效的模式有 "out-in" 和 "in-out"；默認同時生效。
      if (mode === 'out-in') {
        // return placeholder node and queue update when leave finishes
        this._leaving = true
        mergeVNodeHook(oldData, 'afterLeave', () => {
          this._leaving = false
          this.$forceUpdate()
        })
        return placeholder(h, rawChild)
      } else if (mode === 'in-out') {
        if (isAsyncPlaceholder(child)) {
          return oldRawChild
        }
        let delayedLeave
        const performLeave = () => { delayedLeave() }
        mergeVNodeHook(data, 'afterEnter', performLeave)
        mergeVNodeHook(data, 'enterCancelled', performLeave)
        mergeVNodeHook(oldData, 'delayLeave', leave => { delayedLeave = leave })
      }

這裏就是 mode 的實現代碼了，先看看兩種 mode 的用法

  • in-out：新元素先進行過渡，完成以後當前元素過渡離開。
  • out-in：當前元素先進行過渡，完成以後新元素過渡進入。

能夠看到，在 out-in 邏輯中，當切換元素時，先不渲染第二個組件而是返回，以後纔會返回 placeholder 函數結果，當第一個元素徹底 leave 後加載第二個元素。而在 in-out 元素中作的是將第一個元素延時到第二個元素 enter 後再 leave。

9. <transition-group> 的 v-move 從新排序一組內容，如何實現的移動變化？

好比咱們有一個 1-5 的數組使用 v-for 遍歷顯示到 transition-group 中，當數組發生變化時，會作以下操做：

  • 初始數組 [ 1, 2, 3, 4, 5 ]
  • 數組發生變化 [ 1, 4, 3, 2, 5 ]
  • 在 render 函數中記錄變化先後額數組 preChildren 和 children 兩個 VNode 數組。
  • 在 render 函數中使用 getBoundingClientRect() 方法記錄變化前每一個元素的位置 oldPos。
  • 獲取要保留和移除的元素數組。
  • 渲染變化後的數組元素。
  • 在 beforeUpdate 方法中使用 patch 方法移除要移除的元素。
  • 進入 Updated 方法中，注意此時渲染結果已是新數組 [ 1, 4, 3, 2, 5 ] 了。
  • 獲取過渡類名和子元素數組 children。

  • 遍歷調用

    • 執行回調函數
    • 計算當前各元素位置 newPos
    • 根據 oldPos 和 newPos，使用內聯樣式 translate(${dx}px,${dy}px) 將元素移動到以前的位置，看着就像是 [ 1, 2, 3, 4, 5 ]
  • 最後遍歷元素，添加 moveClass 類名，移除 translate(${dx}px,${dy}px) 內聯樣式。綁定 transitionend 事件。

代碼太長，就很少貼了~能夠點擊這裏跳轉查看。總結下來就是先改變元素，而後把元素移動成以前的樣子，而後使用過渡類名定義過渡時間實現過渡效果。
v-move 的關鍵就是「僞裝元素位置沒變」的行爲。讓咱們看上去像是慢慢移動的。

function applyTranslation (c: VNode) {
  const oldPos = c.data.pos
  const newPos = c.data.newPos
  const dx = oldPos.left - newPos.left
  const dy = oldPos.top - newPos.top
  if (dx || dy) {
    // 定義 0 秒的 translate 內聯樣式把元素移動到原來的樣子
    c.data.moved = true
    const s = c.elm.style
    s.transform = s.WebkitTransform = `translate(${dx}px,${dy}px)`
    s.transitionDuration = '0s'
  }
}

10. vue 的 transition 和 CSS3 的 transition 有何不一樣？

基本原理都是使用了 CSS3 的 transition，可是 Vue 的 transition 組件是配合着 VDOM 來寫的、同時提供了過渡各階段效果的 CSS 和 JS 控制，便於咱們快捷、精確、安全地實現一些簡單或複雜的過渡效果。

最後

本來只是想看看 transition 如何實現，卻扯出這麼一堆問題。其中關於 transition 和 transition-group 組件講的有點草率，有興趣能夠再深刻學習下~
從本次學習中我學到了：

  • 更加優雅高效的 JS 邏輯寫法（patch 中的生命週期統一處理 DOM 操做中的邏輯）
  • 更加熟悉 CSS3 的 transition 過渡屬性。
  • 解決了我對 transition 的各類疑問。

OK，關於 Vue 的過渡效果就聊到這兒了，寫了三天……我得去休息休息了 0.0

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程