fix keep-alive component inner transition (fix vuejs#4339)

yyx990803 · yyx990803 · commit db0bf76e5126 · 2016-11-30T23:29:03.000-05:00
diff --git a/src/core/vdom/patch.js b/src/core/vdom/patch.js
@@ -20,7 +20,7 @@ import { registerRef } from './modules/ref'
 
 export const emptyNode = new VNode('', {}, [])
 
-const hooks = ['create', 'update', 'remove', 'destroy']
+const hooks = ['create', 'activate', 'update', 'remove', 'destroy']
 
 function isUndef (s) {
   return s == null
@@ -171,15 +171,35 @@ export function createPatchFunction (backend) {
       if (isDef(vnode.child)) {
         initComponent(vnode, insertedVnodeQueue)
         if (isReactivated) {
-          // unlike a newly created component,
-          // a reactivated keep-alive component doesn't insert itself
-          insert(parentElm, vnode.elm, refElm)
+          reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
         }
         return true
       }
     }
   }
 
+  function reactivateComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
+    let i
+    // hack for #4339: a reactivated component with inner transition
+    // does not trigger because the inner node's created hooks are not called
+    // again. It's not ideal to involve module-specific logic in here but
+    // there doesn't seem to be a better way to do it.
+    let innerNode = vnode
+    while (innerNode.child) {
+      innerNode = innerNode.child._vnode
+      if (isDef(i = innerNode.data) && isDef(i = i.transition)) {
+        for (i = 0; i < cbs.activate.length; ++i) {
+          cbs.activate[i](emptyNode, innerNode)
+        }
+        insertedVnodeQueue.push(innerNode)
+        break
+      }
+    }
+    // unlike a newly created component,
+    // a reactivated keep-alive component doesn't insert itself
+    insert(parentElm, vnode.elm, refElm)
+  }
+
   function insert (parent, elm, ref) {
     if (parent) {
       nodeOps.insertBefore(parent, elm, ref)
diff --git a/src/platforms/web/runtime/modules/transition.js b/src/platforms/web/runtime/modules/transition.js
@@ -253,12 +253,15 @@ function once (fn: Function): Function {
   }
 }
 
+function _enter (_: any, vnode: VNodeWithData) {
+  if (!vnode.data.show) {
+    enter(vnode)
+  }
+}
+
 export default inBrowser ? {
-  create (_: any, vnode: VNodeWithData) {
-    if (!vnode.data.show) {
-      enter(vnode)
-    }
-  },
+  create: _enter,
+  activate: _enter,
   remove (vnode: VNode, rm: Function) {
     /* istanbul ignore else */
     if (!vnode.data.show) {
diff --git a/test/unit/features/component/component-keep-alive.spec.js b/test/unit/features/component/component-keep-alive.spec.js
@@ -504,5 +504,42 @@ describe('Component keep-alive', () => {
         )
       }).then(done).then(done)
     })
+
+    // #4339
+    it('component with inner transition', done => {
+      const vm = new Vue({
+        template: `
+          <div>
+            <keep-alive>
+              <component ref="test" :is="view"></component>
+            </keep-alive>
+          </div>
+        `,
+        data: { view: 'foo' },
+        components: {
+          foo: { template: '<transition><div class="test">foo</div></transition>' },
+          bar: { template: '<transition name="test"><div class="test">bar</div></transition>' }
+        }
+      }).$mount(el)
+
+      // should not apply transition on initial render by default
+      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
+      vm.view = 'bar'
+      waitForUpdate(() => {
+        expect(vm.$el.innerHTML).toBe(
+          '<div class="test v-leave v-leave-active">foo</div>' +
+          '<div class="test test-enter test-enter-active">bar</div>'
+        )
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.innerHTML).toBe(
+          '<div class="test v-leave-active">foo</div>' +
+          '<div class="test test-enter-active">bar</div>'
+        )
+      }).thenWaitFor(duration + buffer).then(() => {
+        expect(vm.$el.innerHTML).toBe(
+          '<div class="test">bar</div>'
+        )
+      }).then(done)
+    })
   }
 })
