From 68be112652060f9a7123b594a3b18ca5fc31b033 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 15 Aug 2016 22:58:18 -0400 Subject: [PATCH] Revert "support transition on component with v-show in root node (fix #3431)" This reverts commit aab560e0d9c5c775c1f88d7d9316c79d69001297. --- src/platforms/web/runtime/directives/show.js | 34 ++++------------ .../features/transition/transition.spec.js | 39 ------------------- 2 files changed, 7 insertions(+), 66 deletions(-) diff --git a/src/platforms/web/runtime/directives/show.js b/src/platforms/web/runtime/directives/show.js index 1ff8bedde85..44c009793be 100644 --- a/src/platforms/web/runtime/directives/show.js +++ b/src/platforms/web/runtime/directives/show.js @@ -3,36 +3,16 @@ import { isIE9 } from 'web/util/index' import { enter, leave } from '../modules/transition' -// The v-show directive may appear on a component's parent vnode or its -// inner vnode, and the transition wrapper may be defined outside or inside -// the component. To cater for all possible cases, recursively search for -// possible transition defined on component parent placeholder or inside -// child component. -function detectTransitionNode (vnode: VNode): VNodeWithData { - let parent = vnode - while ((parent = parent.parent)) { - if (hasTransition(parent)) { - return parent - } - } - if (hasTransition(vnode)) { - return vnode - } - while (vnode.child && (vnode = vnode.child._vnode)) { - if (hasTransition(vnode)) { - return vnode - } - } - return vnode -} - -function hasTransition (vnode) { - return vnode.data && vnode.data.transition +// recursively search for possible transition defined inside the component root +function locateNode (vnode: VNode): VNodeWithData { + return vnode.child && (!vnode.data || !vnode.data.transition) + ? locateNode(vnode.child._vnode) + : vnode } export default { bind (el: any, { value }: VNodeDirective, vnode: VNodeWithData) { - vnode = detectTransitionNode(vnode) + vnode = locateNode(vnode) const transition = vnode.data && vnode.data.transition if (value && transition && transition.appear && !isIE9) { enter(vnode) @@ -44,7 +24,7 @@ export default { update (el: any, { value, oldValue }: VNodeDirective, vnode: VNodeWithData) { /* istanbul ignore if */ if (value === oldValue) return - vnode = detectTransitionNode(vnode) + vnode = locateNode(vnode) const transition = vnode.data && vnode.data.transition if (transition && !isIE9) { if (value) { diff --git a/test/unit/features/transition/transition.spec.js b/test/unit/features/transition/transition.spec.js index 6de5a41d260..143d4b6adc4 100644 --- a/test/unit/features/transition/transition.spec.js +++ b/test/unit/features/transition/transition.spec.js @@ -558,45 +558,6 @@ if (!isIE9) { }).then(done) }) - it('transition with v-show, with transition outside and v-show inside', done => { - const vm = new Vue({ - template: ` -
- - - -
- `, - data: { ok: true }, - components: { - test: { - props: ['ok'], - template: `
foo
` - } - } - }).$mount(el) - - // should not apply transition on initial render by default - expect(vm.$el.textContent).toBe('foo') - expect(vm.$el.children[0].style.display).toBe('') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-leave-active') - }).thenWaitFor(duration + 10).then(() => { - expect(vm.$el.children[0].style.display).toBe('none') - vm.ok = true - }).then(() => { - expect(vm.$el.children[0].style.display).toBe('') - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter-active') - }).thenWaitFor(duration + 10).then(() => { - expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) - it('leaveCancelled (v-show only)', done => { const spy = jasmine.createSpy('leaveCancelled') const vm = new Vue({