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({