GitHub
/
Vue.js
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

dev
DSha 6 years ago
committed by Evan You
parent
d44cc20e96
commit
4de4649d96
3 changed files with 117 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      examples/modal/index.html
  2. 2
      src/platforms/web/runtime/modules/transition.js
  3. 118
      test/unit/features/transition/transition.spec.js

2
examples/modal/index.html
View File

@ -10,7 +10,7 @@
<body> <body>
<!-- template for the modal component --> <!-- template for the modal component -->
<script type="text/x-template" id="modal-template"> <script type="text/x-template" id="modal-template">
<transition name="modal"> <transition name="modal" appear>
<div class="modal-mask"> <div class="modal-mask">
<div class="modal-wrapper"> <div class="modal-wrapper">
<div class="modal-container"> <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 context = activeInstance
let transitionNode = activeInstance.$vnode let transitionNode = activeInstance.$vnode
while (transitionNode && transitionNode.parent) { while (transitionNode && transitionNode.parent) {
transitionNode = transitionNode.parent
context = transitionNode.context context = transitionNode.context
transitionNode = transitionNode.parent
} }
const isAppear = !context._isMounted || !vnode.isRootInsert const isAppear = !context._isMounted || !vnode.isRootInsert

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

@ -842,7 +842,7 @@ if (!isIE9) {
}).then(done) }).then(done)
}) })
it('transition inside child component', done => { it('transition inside child component with v-if', done => {
const vm = new Vue({ const vm = new Vue({
template: ` template: `
<div> <div>
@ -872,14 +872,126 @@ if (!isIE9) {
expect(vm.$el.children.length).toBe(0) expect(vm.$el.children.length).toBe(0)
vm.ok = true vm.ok = true
}).then(() => { }).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(() => { }).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(() => { }).thenWaitFor(duration + buffer).then(() => {
expect(vm.$el.children.length).toBe(0)
vm.ok = true
}).then(() => {
expect(vm.$el.children[0].className).toBe('test') expect(vm.$el.children[0].className).toBe('test')
}).then(done) }).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)
})
it('custom transition higher-order component', done => { it('custom transition higher-order component', done => {
const vm = new Vue({ const vm = new Vue({
template: '<div><my-transition><div v-if="ok" class="test">foo</div></my-transition></div>', template: '<div><my-transition><div v-if="ok" class="test">foo</div></my-transition></div>',

Write Preview
Loading…
Cancel
Save