Vue/vue
1
0
Fork 0
mirror of https://github.com/vuejs/vue.git synced 2024-11-21 20:28:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(transition): fix appear check for transition wrapper components (#9668)

Browse Source
This commit is contained in:
DSha 2019-03-14 15:45:42 +08:00 committed by Evan You
parent d44cc20e96
commit 4de4649d96
3 changed files with 117 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/modal/index.html
View File

@ -10,7 +10,7 @@
<body>
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
<transition name="modal">
<transition name="modal" appear>
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">

2
src/platforms/web/runtime/modules/transition.js
View File

@ -66,8 +66,8 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
let context = activeInstance
let transitionNode = activeInstance.$vnode
while (transitionNode && transitionNode.parent) {
transitionNode = transitionNode.parent
context = transitionNode.context
transitionNode = transitionNode.parent
}
const isAppear = !context._isMounted || !vnode.isRootInsert

118
test/unit/features/transition/transition.spec.js
View File

@ -842,7 +842,7 @@ if (!isIE9) {
}).then(done)
})
it('transition inside child component', done => {
it('transition inside child component with v-if', done => {
const vm = new Vue({
template: `
<div>
@ -872,11 +872,123 @@ if (!isIE9) {
expect(vm.$el.children.length).toBe(0)
vm.ok = true
}).then(() => {
expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
expect(vm.$el.children[0].className).toBe('test')
}).then(done)
})
it('transition with appear inside child component with v-if', done => {
const vm = new Vue({
template: `
<div>
<test v-if="ok" class="test"></test>
</div>
`,
data: { ok: true },
components: {
test: {
template: `
<transition appear
appear-class="test-appear"
appear-to-class="test-appear-to"
appear-active-class="test-appear-active">
<div>foo</div>
</transition>
`
}
}
}).$mount(el)
waitForUpdate(() => {
expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
expect(vm.$el.children[0].className).toBe('test test-appear-active test-appear-to')
}).thenWaitFor(duration + buffer).then(() => {
expect(vm.$el.children[0].className).toBe('test')
vm.ok = false
}).then(() => {
expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
}).thenWaitFor(duration + buffer).then(() => {
expect(vm.$el.children.length).toBe(0)
}).then(done)
})
it('transition inside nested child component with v-if', done => {
const vm = new Vue({
template: `
<div>
<foo v-if="ok" class="test"></foo>
</div>
`,
data: { ok: true },
components: {
foo: {
template: '<bar></bar>',
components: {
bar: {
template: '<transition><div>foo</div></transition>'
}
}
}
}
}).$mount(el)
// should not apply transition on initial render by default
expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
vm.ok = false
waitForUpdate(() => {
expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
}).thenWaitFor(duration + buffer).then(() => {
expect(vm.$el.children.length).toBe(0)
vm.ok = true
}).then(() => {
expect(vm.$el.children[0].className).toBe('test')
}).then(done)
})
it('transition with appear inside nested child component with v-if', done => {
const vm = new Vue({
template: `
<div>
<foo v-if="ok" class="test"></foo>
</div>
`,
data: { ok: true },
components: {
foo: {
template: '<bar></bar>',
components: {
bar: {
template: `
<transition appear
appear-class="test-appear"
appear-to-class="test-appear-to"
appear-active-class="test-appear-active">
<div>foo</div>
</transition>
`
}
}
}
}
}).$mount(el)
waitForUpdate(() => {
expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-appear-active test-appear-to')
}).thenWaitFor(duration + buffer).then(() => {
expect(vm.$el.children[0].className).toBe('test')
vm.ok = false
}).then(() => {
expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
}).thenWaitFor(duration + buffer).then(() => {
expect(vm.$el.children.length).toBe(0)
}).then(done)
})