fix: render node transition is dynamic

fixes #52

Author: eddyerburgh

src/components/TransitionStub.js

@@ -11,6 +11,10 @@ function getRealChild (vnode: ?VNode): ?VNode {
   }
 }
 
+function isSameChild (child: VNode, oldChild: VNode): boolean {
+  return oldChild.key === child.key && oldChild.tag === child.tag
+}
+
 function getFirstComponentChild (children: ?Array<VNode>): ?VNode {
   if (Array.isArray(children)) {
     for (let i = 0; i < children.length; i++) {
@@ -22,6 +26,16 @@ function getFirstComponentChild (children: ?Array<VNode>): ?VNode {
   }
 }
 
+function isPrimitive (value: any): boolean %checks {
+  return (
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    // $flow-disable-line
+    typeof value === 'symbol' ||
+    typeof value === 'boolean'
+  )
+}
+
 function isAsyncPlaceholder (node: VNode): boolean {
   return node.isComment && node.asyncFactory
 }
@@ -102,14 +116,37 @@ export default {
       return rawChild
     }
 
-    (child.data || (child.data = {})).transition = extractTransitionData(this)
+    const id: string = `__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
+
+    const data: Object = (child.data || (child.data = {})).transition = extractTransitionData(this)
+    const oldRawChild: VNode = this._vnode
+    const oldChild: VNode = getRealChild(oldRawChild)
+    if (child.data.directives && child.data.directives.some(d => d.name === 'show')) {
+      child.data.show = true
+    }
 
      // mark v-show
      // so that the transition module can hand over the control to the directive
     if (child.data.directives && child.data.directives.some(d => d.name === 'show')) {
       child.data.show = true
     }
-
+    if (
+         oldChild &&
+         oldChild.data &&
+         !isSameChild(child, oldChild) &&
+         !isAsyncPlaceholder(oldChild) &&
+         // #6687 component root is a comment node
+         !(oldChild.componentInstance && oldChild.componentInstance._vnode.isComment)
+       ) {
+      oldChild.data = { ...data }
+    }
     return rawChild
   }
 }

test/unit/specs/TransitionStub.spec.js

@@ -30,4 +30,30 @@ describe('TransitionStub', () => {
     expect(error.args[0][0]).to.equal(msg)
     error.restore()
   })
+
+  it('handles keyed transitions', () => {
+    const TestComponent = {
+      template: `
+      <div>
+        <transition>
+          <div v-if="bool" key="a">a</div>
+          <div v-else key="b">b</div>
+        </transition>
+      </div>
+      `,
+      data () {
+        return {
+          bool: true
+        }
+      }
+    }
+    const wrapper = mount(TestComponent, {
+      stubs: {
+        'transition': TransitionStub
+      }
+    })
+    expect(wrapper.text()).to.equal('a')
+    wrapper.setData({ bool: false })
+    expect(wrapper.text()).to.equal('b')
+  })
 })