Просмотр исходного кода

avoid unnecessary enter transitions on nested inserted elements

Evan You 10 лет назад
Родитель
Сommit
40b93e6527

+ 1 - 0
flow/vnode.js

@@ -28,6 +28,7 @@ declare type VNodeWithData = {
   key: string | number | void;
   parent?: VNodeWithData;
   child?: Component;
+  isRootInsert: boolean;
 }
 
 declare interface VNodeData {

+ 3 - 2
src/core/vdom/patch.js

@@ -76,9 +76,10 @@ export function createPatchFunction (backend) {
     nodeOps.removeChild(parent, el)
   }
 
-  function createElm (vnode, insertedVnodeQueue) {
+  function createElm (vnode, insertedVnodeQueue, nested) {
     let i, elm
     const data = vnode.data
+    vnode.isRootInsert = !nested
     if (isDef(data)) {
       if (isDef(i = data.hook) && isDef(i = i.init)) i(vnode)
       // after calling the init hook, if the vnode is a child component
@@ -118,7 +119,7 @@ export function createPatchFunction (backend) {
       setScope(vnode)
       if (Array.isArray(children)) {
         for (i = 0; i < children.length; ++i) {
-          nodeOps.appendChild(elm, createElm(children[i], insertedVnodeQueue))
+          nodeOps.appendChild(elm, createElm(children[i], insertedVnodeQueue, true))
         }
       } else if (isPrimitive(vnode.text)) {
         nodeOps.appendChild(elm, nodeOps.createTextNode(vnode.text))

+ 8 - 6
src/core/vdom/vnode.js

@@ -7,14 +7,15 @@ export default class VNode {
   text: string | void;
   elm: Node | void;
   ns: string | void;
-  context: Component | void;
-  host: ?Component;
+  context: Component | void; // rendered in this component's scope
+  host: ?Component; // inserted into this component as children
   key: string | number | void;
   componentOptions: VNodeComponentOptions | void;
-  child: Component | void;
-  parent: VNode | void;
-  raw: ?boolean;
-  isStatic: ?boolean;
+  child: Component | void; // component instance
+  parent: VNode | void; // compoennt placeholder node
+  raw: ?boolean; // contains raw HTML
+  isStatic: ?boolean; // hoisted static node
+  isRootInsert: boolean; // necessary for enter transition check
 
   constructor (
     tag?: string,
@@ -41,6 +42,7 @@ export default class VNode {
     this.parent = undefined
     this.raw = false
     this.isStatic = false
+    this.isRootInsert = true
     // apply construct hook.
     // this is applied during render, before patch happens.
     // unlike other hooks, this is applied on both client and server.

+ 1 - 1
src/platforms/web/runtime/modules/transition.js

@@ -48,7 +48,7 @@ export function enter (vnode: VNodeWithData) {
   } = data
 
   const context = vnode.context.$parent || vnode.context
-  const isAppear = !context._isMounted
+  const isAppear = !context._isMounted || !vnode.isRootInsert
   if (isAppear && !appear && appear !== '') {
     return
   }