Browse Source

all tests pass for new transition API

Evan You 9 năm trước cách đây
mục cha
commit
ef311931a3

+ 1 - 1
src/core/components/keep-alive.js

@@ -13,7 +13,7 @@ export default {
   render () {
     const rawChild = this.child
     const realChild = getRealChild(this.child)
-    if (realChild.componentOptions) {
+    if (realChild && realChild.componentOptions) {
       const cid = realChild.componentOptions.Ctor.cid
       if (this.cache[cid]) {
         const child = realChild.child = this.cache[cid].child

+ 7 - 15
src/platforms/web/runtime/components/transition.js

@@ -1,6 +1,5 @@
 import { warn } from 'core/util/index'
 import { noop, camelize } from 'shared/util'
-import { leave } from 'web/runtime/modules/transition'
 import { getRealChild, mergeVNodeHook } from 'core/vdom/helpers'
 
 export default {
@@ -60,20 +59,13 @@ export default {
     const oldChild = getRealChild(oldRawChild)
     if (mode && oldChild && oldChild.data && oldChild.key !== child.key) {
       if (mode === 'out-in') {
-        if (
-          !oldChild.elm._leaveCb && // not already leaving
-          oldChild.data.transition // not already left
-        ) {
-          leave(oldChild, () => {
-            // mark left & avoid triggering leave transition again
-            oldChild.data.transition = null
-            this.$forceUpdate()
-          })
-        }
-        // return old node if not left yet
-        if (oldChild.data.transition) {
-          return oldRawChild
-        }
+        // return empty node and queue update when leave finishes
+        mergeVNodeHook(oldChild.data.transition, 'afterLeave', () => {
+          this.$forceUpdate()
+        })
+        return /\d-keep-alive$/.test(rawChild.tag)
+          ? h('keep-alive')
+          : null
       } else if (mode === 'in-out') {
         let delayedLeave
         const performLeave = () => { delayedLeave() }

+ 20 - 24
test/unit/features/component/component-keep-alive.spec.js

@@ -81,23 +81,21 @@ describe('Component keep-alive', () => {
       let next
       const vm = new Vue({
         template: `<div>
-          <component
-            :is="view"
-            class="test"
-            keep-alive
-            transition="test"
-            transition-mode="out-in">
-          </component>
+          <transition name="test" mode="out-in" @after-leave="afterLeave">
+            <component
+              :is="view"
+              class="test"
+              keep-alive>
+            </component>
+          <transition>
         </div>`,
         data: {
           view: 'one'
         },
         components,
-        transitions: {
-          test: {
-            afterLeave () {
-              next()
-            }
+        methods: {
+          afterLeave () {
+            next()
           }
         }
       }).$mount(el)
@@ -170,23 +168,21 @@ describe('Component keep-alive', () => {
       let next
       const vm = new Vue({
         template: `<div>
-          <component
-            :is="view"
-            class="test"
-            keep-alive
-            transition="test"
-            transition-mode="in-out">
-          </component>
+          <transition name="test" mode="in-out" @after-enter="afterEnter">
+            <component
+              :is="view"
+              class="test"
+              keep-alive>
+            </component>
+          </transition>
         </div>`,
         data: {
           view: 'one'
         },
         components,
-        transitions: {
-          test: {
-            afterEnter () {
-              next()
-            }
+        methods: {
+          afterEnter () {
+            next()
           }
         }
       }).$mount(el)

+ 2 - 2
test/unit/features/global-api/assets.spec.js

@@ -3,8 +3,8 @@ import Vue from 'vue'
 describe('Global API: assets', () => {
   const Test = Vue.extend()
 
-  it('directive / transition / filters', () => {
-    const assets = ['directive', 'transition', 'filter']
+  it('directive / filters', () => {
+    const assets = ['directive', 'filter']
     assets.forEach(function (type) {
       const def = {}
       Test[type]('test', def)