Skip to content

Commit 4de4649

Browse files
shasharomanyyx990803
shasharoman
authored and
yyx990803
committed
fix(transition): fix appear check for transition wrapper components (#9668)
1 parent d44cc20 commit 4de4649

File tree

3 files changed

+117
-5
lines changed

3 files changed

+117
-5
lines changed

‎examples/modal/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<body>
1111
<!-- template for the modal component -->
1212
<script type="text/x-template" id="modal-template">
13-
<transition name="modal">
13+
<transition name="modal" appear>
1414
<div class="modal-mask">
1515
<div class="modal-wrapper">
1616
<div class="modal-container">

‎src/platforms/web/runtime/modules/transition.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
6666
let context = activeInstance
6767
let transitionNode = activeInstance.$vnode
6868
while (transitionNode && transitionNode.parent) {
69-
transitionNode = transitionNode.parent
7069
context = transitionNode.context
70+
transitionNode = transitionNode.parent
7171
}
7272

7373
const isAppear = !context._isMounted || !vnode.isRootInsert

‎test/unit/features/transition/transition.spec.js‎

Lines changed: 115 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -842,7 +842,7 @@ if (!isIE9) {
842842
}).then(done)
843843
})
844844

845-
it('transition inside child component', done => {
845+
it('transition inside child component with v-if', done => {
846846
const vm = new Vue({
847847
template: `
848848
<div>
@@ -872,14 +872,126 @@ if (!isIE9) {
872872
expect(vm.$el.children.length).toBe(0)
873873
vm.ok = true
874874
}).then(() => {
875-
expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
875+
expect(vm.$el.children[0].className).toBe('test')
876+
}).then(done)
877+
})
878+
879+
it('transition with appear inside child component with v-if', done => {
880+
const vm = new Vue({
881+
template: `
882+
<div>
883+
<test v-if="ok" class="test"></test>
884+
</div>
885+
`,
886+
data: { ok: true },
887+
components: {
888+
test: {
889+
template: `
890+
<transition appear
891+
appear-class="test-appear"
892+
appear-to-class="test-appear-to"
893+
appear-active-class="test-appear-active">
894+
<div>foo</div>
895+
</transition>
896+
`
897+
}
898+
}
899+
}).$mount(el)
900+
901+
waitForUpdate(() => {
902+
expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active')
876903
}).thenWaitFor(nextFrame).then(() => {
877-
expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
904+
expect(vm.$el.children[0].className).toBe('test test-appear-active test-appear-to')
905+
}).thenWaitFor(duration + buffer).then(() => {
906+
expect(vm.$el.children[0].className).toBe('test')
907+
vm.ok = false
908+
}).then(() => {
909+
expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
910+
}).thenWaitFor(nextFrame).then(() => {
911+
expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
912+
}).thenWaitFor(duration + buffer).then(() => {
913+
expect(vm.$el.children.length).toBe(0)
914+
}).then(done)
915+
})
916+
917+
it('transition inside nested child component with v-if', done => {
918+
const vm = new Vue({
919+
template: `
920+
<div>
921+
<foo v-if="ok" class="test"></foo>
922+
</div>
923+
`,
924+
data: { ok: true },
925+
components: {
926+
foo: {
927+
template: '<bar></bar>',
928+
components: {
929+
bar: {
930+
template: '<transition><div>foo</div></transition>'
931+
}
932+
}
933+
}
934+
}
935+
}).$mount(el)
936+
937+
// should not apply transition on initial render by default
938+
expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
939+
vm.ok = false
940+
waitForUpdate(() => {
941+
expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
942+
}).thenWaitFor(nextFrame).then(() => {
943+
expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
878944
}).thenWaitFor(duration + buffer).then(() => {
945+
expect(vm.$el.children.length).toBe(0)
946+
vm.ok = true
947+
}).then(() => {
879948
expect(vm.$el.children[0].className).toBe('test')
880949
}).then(done)
881950
})
882951

952+
it('transition with appear inside nested child component with v-if', done => {
953+
const vm = new Vue({
954+
template: `
955+
<div>
956+
<foo v-if="ok" class="test"></foo>
957+
</div>
958+
`,
959+
data: { ok: true },
960+
components: {
961+
foo: {
962+
template: '<bar></bar>',
963+
components: {
964+
bar: {
965+
template: `
966+
<transition appear
967+
appear-class="test-appear"
968+
appear-to-class="test-appear-to"
969+
appear-active-class="test-appear-active">
970+
<div>foo</div>
971+
</transition>
972+
`
973+
}
974+
}
975+
}
976+
}
977+
}).$mount(el)
978+
979+
waitForUpdate(() => {
980+
expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active')
981+
}).thenWaitFor(nextFrame).then(() => {
982+
expect(vm.$el.children[0].className).toBe('test test-appear-active test-appear-to')
983+
}).thenWaitFor(duration + buffer).then(() => {
984+
expect(vm.$el.children[0].className).toBe('test')
985+
vm.ok = false
986+
}).then(() => {
987+
expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
988+
}).thenWaitFor(nextFrame).then(() => {
989+
expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
990+
}).thenWaitFor(duration + buffer).then(() => {
991+
expect(vm.$el.children.length).toBe(0)
992+
}).then(done)
993+
})
994+
883995
it('custom transition higher-order component', done => {
884996
const vm = new Vue({
885997
template: '<div><my-transition><div v-if="ok" class="test">foo</div></my-transition></div>',

0 commit comments

Comments
 (0)