From 2fcd053f9c063fdc031a19ace6511b664114bec8 Mon Sep 17 00:00:00 2001
From: shasharoman <shasharoman@gmail.com>
Date: Fri, 8 Mar 2019 14:24:29 +0800
Subject: [PATCH 1/5] fix(#9628): fix looking up `context`

---
 src/platforms/web/runtime/modules/transition.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/platforms/web/runtime/modules/transition.js b/src/platforms/web/runtime/modules/transition.js
index 128a1c0bd1b..6117097088d 100644
--- a/src/platforms/web/runtime/modules/transition.js
+++ b/src/platforms/web/runtime/modules/transition.js
@@ -66,8 +66,8 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
   let context = activeInstance
   let transitionNode = activeInstance.$vnode
   while (transitionNode && transitionNode.parent) {
-    transitionNode = transitionNode.parent
     context = transitionNode.context
+    transitionNode = transitionNode.parent
   }
 
   const isAppear = !context._isMounted || !vnode.isRootInsert

From 6e070159622be58a5e3b2b8af464613694a95cee Mon Sep 17 00:00:00 2001
From: shasharoman <shasharoman@gmail.com>
Date: Sun, 10 Mar 2019 13:46:48 +0800
Subject: [PATCH 2/5] test: update test case for transition

---
 test/unit/features/transition/transition.spec.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/test/unit/features/transition/transition.spec.js b/test/unit/features/transition/transition.spec.js
index 2ecf80b854d..deac945d551 100644
--- a/test/unit/features/transition/transition.spec.js
+++ b/test/unit/features/transition/transition.spec.js
@@ -842,7 +842,7 @@ if (!isIE9) {
       }).then(done)
     })
 
-    it('transition inside child component', done => {
+    it('transition inside child component with v-if', done => {
       const vm = new Vue({
         template: `
           <div>
@@ -872,10 +872,6 @@ if (!isIE9) {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
-      }).thenWaitFor(duration + buffer).then(() => {
         expect(vm.$el.children[0].className).toBe('test')
       }).then(done)
     })

From c8f8b8ac005f0b771a709d8d45ccae7b2c118ae2 Mon Sep 17 00:00:00 2001
From: shasharoman <shasharoman@gmail.com>
Date: Sun, 10 Mar 2019 13:47:25 +0800
Subject: [PATCH 3/5] test: add test case for transition

---
 .../features/transition/transition.spec.js    | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/test/unit/features/transition/transition.spec.js b/test/unit/features/transition/transition.spec.js
index deac945d551..bbc78ecc625 100644
--- a/test/unit/features/transition/transition.spec.js
+++ b/test/unit/features/transition/transition.spec.js
@@ -876,6 +876,44 @@ if (!isIE9) {
       }).then(done)
     })
 
+    it('transition with appear inside child component with v-if', done => {
+      const vm = new Vue({
+        template: `
+          <div>
+            <test v-if="ok" class="test"></test>
+          </div>
+        `,
+        data: { ok: true },
+        components: {
+          test: {
+            template: `
+              <transition appear
+                appear-class="test-appear"
+                appear-to-class="test-appear-to"
+                appear-active-class="test-appear-active">
+                <div>foo</div>
+              </transition>
+            `
+          }
+        }
+      }).$mount(el)
+
+      waitForUpdate(() => {
+        expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.children[0].className).toBe('test test-appear-active test-appear-to')
+      }).thenWaitFor(duration + buffer).then(() => {
+        expect(vm.$el.children[0].className).toBe('test')
+        vm.ok = false
+      }).then(() => {
+        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+      }).thenWaitFor(duration + buffer).then(() => {
+        expect(vm.$el.children.length).toBe(0)
+      }).then(done)
+    })
+
     it('custom transition higher-order component', done => {
       const vm = new Vue({
         template: '<div><my-transition><div v-if="ok" class="test">foo</div></my-transition></div>',

From 2eba1d5e653e2f65fe9762eb3e70bb21d57d893b Mon Sep 17 00:00:00 2001
From: shasharoman <shasharoman@gmail.com>
Date: Sun, 10 Mar 2019 14:05:38 +0800
Subject: [PATCH 4/5] test: add test case for transition

---
 .../features/transition/transition.spec.js    | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)

diff --git a/test/unit/features/transition/transition.spec.js b/test/unit/features/transition/transition.spec.js
index bbc78ecc625..6bfc8e7e53b 100644
--- a/test/unit/features/transition/transition.spec.js
+++ b/test/unit/features/transition/transition.spec.js
@@ -914,6 +914,84 @@ if (!isIE9) {
       }).then(done)
     })
 
+    it('transition inside nested child component with v-if', done => {
+      const vm = new Vue({
+        template: `
+          <div>
+            <foo v-if="ok" class="test"></foo>
+          </div>
+        `,
+        data: { ok: true },
+        components: {
+          foo: {
+            template: '<bar></bar>',
+            components: {
+              bar: {
+                template: '<transition><div>foo</div></transition>'
+              }
+            }
+          }
+        }
+      }).$mount(el)
+
+      // should not apply transition on initial render by default
+      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
+      vm.ok = false
+      waitForUpdate(() => {
+        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+      }).thenWaitFor(duration + buffer).then(() => {
+        expect(vm.$el.children.length).toBe(0)
+        vm.ok = true
+      }).then(() => {
+        expect(vm.$el.children[0].className).toBe('test')
+      }).then(done)
+    })
+
+    it('transition with appear inside nested child component with v-if', done => {
+      const vm = new Vue({
+        template: `
+          <div>
+            <foo v-if="ok" class="test"></foo>
+          </div>
+        `,
+        data: { ok: true },
+        components: {
+          foo: {
+            template: '<bar></bar>',
+            components: {
+              bar: {
+                template: `
+                  <transition appear
+                    appear-class="test-appear"
+                    appear-to-class="test-appear-to"
+                    appear-active-class="test-appear-active">
+                    <div>foo</div>
+                  </transition>
+                `
+              }
+            }
+          }
+        }
+      }).$mount(el)
+
+      waitForUpdate(() => {
+        expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.children[0].className).toBe('test test-appear-active test-appear-to')
+      }).thenWaitFor(duration + buffer).then(() => {
+        expect(vm.$el.children[0].className).toBe('test')
+        vm.ok = false
+      }).then(() => {
+        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
+      }).thenWaitFor(nextFrame).then(() => {
+        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+      }).thenWaitFor(duration + buffer).then(() => {
+        expect(vm.$el.children.length).toBe(0)
+      }).then(done)
+    })
+
     it('custom transition higher-order component', done => {
       const vm = new Vue({
         template: '<div><my-transition><div v-if="ok" class="test">foo</div></my-transition></div>',

From ada0a9d63a66ce3fa3312d8addf240eb0f95055d Mon Sep 17 00:00:00 2001
From: shasharoman <shasharoman@gmail.com>
Date: Wed, 13 Mar 2019 00:53:06 +0800
Subject: [PATCH 5/5] docs: update modal example

---
 examples/modal/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/modal/index.html b/examples/modal/index.html
index e2121617646..34b4ebb1d2b 100644
--- a/examples/modal/index.html
+++ b/examples/modal/index.html
@@ -10,7 +10,7 @@
   <body>
     <!-- template for the modal component -->
     <script type="text/x-template" id="modal-template">
-      <transition name="modal">
+      <transition name="modal" appear>
         <div class="modal-mask">
           <div class="modal-wrapper">
             <div class="modal-container">