Skip to content

Commit

Permalink
fix(transition): should not add transition class when cancelled (vuej…
Browse files Browse the repository at this point in the history
  • Loading branch information
Guillaume Chau authored and hefeng committed Jan 25, 2019
1 parent 7969c80 commit c7efd9d
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 12 deletions.
28 changes: 16 additions & 12 deletions src/platforms/web/runtime/modules/transition.js
Original file line number Diff line number Diff line change
Expand Up @@ -149,13 +149,15 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
addTransitionClass(el, startClass)
addTransitionClass(el, activeClass)
nextFrame(() => {
addTransitionClass(el, toClass)
removeTransitionClass(el, startClass)
if (!cb.cancelled && !userWantsControl) {
if (isValidDuration(explicitEnterDuration)) {
setTimeout(cb, explicitEnterDuration)
} else {
whenTransitionEnds(el, type, cb)
if (!cb.cancelled) {
addTransitionClass(el, toClass)
if (!userWantsControl) {
if (isValidDuration(explicitEnterDuration)) {
setTimeout(cb, explicitEnterDuration)
} else {
whenTransitionEnds(el, type, cb)
}
}
}
})
Expand Down Expand Up @@ -257,13 +259,15 @@ export function leave (vnode: VNodeWithData, rm: Function) {
addTransitionClass(el, leaveClass)
addTransitionClass(el, leaveActiveClass)
nextFrame(() => {
addTransitionClass(el, leaveToClass)
removeTransitionClass(el, leaveClass)
if (!cb.cancelled && !userWantsControl) {
if (isValidDuration(explicitLeaveDuration)) {
setTimeout(cb, explicitLeaveDuration)
} else {
whenTransitionEnds(el, type, cb)
if (!cb.cancelled) {
addTransitionClass(el, leaveToClass)
if (!userWantsControl) {
if (isValidDuration(explicitLeaveDuration)) {
setTimeout(cb, explicitLeaveDuration)
} else {
whenTransitionEnds(el, type, cb)
}
}
}
})
Expand Down
44 changes: 44 additions & 0 deletions test/unit/features/transition/transition.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -612,6 +612,50 @@ if (!isIE9) {
}).then(done)
})

it('leave transition with v-show: cancelled on next frame', done => {
const vm = new Vue({
template: `
<div>
<transition name="test">
<div v-show="ok" class="test">foo</div>
</transition>
</div>
`,
data: { ok: true }
}).$mount(el)

vm.ok = false
waitForUpdate(() => {
vm.ok = true
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')
}).thenWaitFor(duration + buffer).then(() => {
expect(vm.$el.children[0].className).toBe('test')
}).then(done)
})

it('enter transition with v-show: cancelled on next frame', done => {
const vm = new Vue({
template: `
<div>
<transition name="test">
<div v-show="ok" class="test">foo</div>
</transition>
</div>
`,
data: { ok: false }
}).$mount(el)

vm.ok = true
waitForUpdate(() => {
vm.ok = false
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to')
}).thenWaitFor(duration + buffer).then(() => {
expect(vm.$el.children[0].className).toBe('test')
}).then(done)
})

it('animations', done => {
const vm = new Vue({
template: `
Expand Down

0 comments on commit c7efd9d

Please sign in to comment.