diff --git a/src/platforms/web/runtime/components/transition.js b/src/platforms/web/runtime/components/transition.js index 3260617bfad..9f8a512e49d 100644 --- a/src/platforms/web/runtime/components/transition.js +++ b/src/platforms/web/runtime/components/transition.js @@ -53,9 +53,11 @@ export function extractTransitionData (comp: Component): Object { } function placeholder (h: Function, rawChild: VNode): ?VNode { - return /\d-keep-alive$/.test(rawChild.tag) - ? h('keep-alive') - : null + if (/\d-keep-alive$/.test(rawChild.tag)) { + return h('keep-alive', { + props: rawChild.componentOptions.propsData + }) + } } function hasParentTransition (vnode: VNode): ?boolean { diff --git a/test/unit/features/component/component-keep-alive.spec.js b/test/unit/features/component/component-keep-alive.spec.js index 4d0f129b49a..c032f2a8d4c 100644 --- a/test/unit/features/component/component-keep-alive.spec.js +++ b/test/unit/features/component/component-keep-alive.spec.js @@ -497,6 +497,91 @@ describe('Component keep-alive', () => { }).then(done) }) + it('with transition-mode out-in + include', done => { + let next + const vm = new Vue({ + template: `
+ + + + + +
`, + data: { + view: 'one' + }, + components, + methods: { + afterLeave () { + next() + } + } + }).$mount(el) + expect(vm.$el.textContent).toBe('one') + assertHookCalls(one, [1, 1, 1, 0, 0]) + assertHookCalls(two, [0, 0, 0, 0, 0]) + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + assertHookCalls(one, [1, 1, 1, 1, 0]) + assertHookCalls(two, [0, 0, 0, 0, 0]) + }).thenWaitFor(nextFrame).then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + }).thenWaitFor(_next => { next = _next }).then(() => { + expect(vm.$el.innerHTML).toBe('') + }).thenWaitFor(nextFrame).then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + ) + assertHookCalls(one, [1, 1, 1, 1, 0]) + assertHookCalls(two, [1, 1, 0, 0, 0]) + }).thenWaitFor(nextFrame).then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + ) + }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + ) + assertHookCalls(one, [1, 1, 1, 1, 0]) + assertHookCalls(two, [1, 1, 0, 0, 0]) + }).then(() => { + vm.view = 'one' + }).then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + ) + assertHookCalls(one, [1, 1, 1, 1, 0]) + assertHookCalls(two, [1, 1, 0, 0, 1]) + }).thenWaitFor(nextFrame).then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + ) + }).thenWaitFor(_next => { next = _next }).then(() => { + expect(vm.$el.innerHTML).toBe('') + }).thenWaitFor(nextFrame).then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + assertHookCalls(one, [1, 1, 2, 1, 0]) + assertHookCalls(two, [1, 1, 0, 0, 1]) + }).thenWaitFor(nextFrame).then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + assertHookCalls(one, [1, 1, 2, 1, 0]) + assertHookCalls(two, [1, 1, 0, 0, 1]) + }).then(done) + }) + it('with transition-mode in-out', done => { let next const vm = new Vue({