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

Revert "fix enter transition flicker regression (fix #4576)" 

This reverts commit 89987e8e2c.
dev
Evan You 8 years ago
parent
2540c37c15
commit
0bb2d4e2b6
5 changed files with 47 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/platforms/web/runtime/modules/transition.js
  2. 16
      test/unit/features/component/component-keep-alive.spec.js
  3. 14
      test/unit/features/transition/transition-group.spec.js
  4. 18
      test/unit/features/transition/transition-mode.spec.js
  5. 44
      test/unit/features/transition/transition.spec.js

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

@ -112,9 +112,9 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
beforeEnterHook && beforeEnterHook(el)
if (expectsCSS) {
addTransitionClass(el, startClass)
addTransitionClass(el, activeClass)
nextFrame(() => {
removeTransitionClass(el, startClass)
addTransitionClass(el, activeClass)
if (!cb.cancelled && !userWantsControl) {
whenTransitionEnds(el, type, cb)
}

16
test/unit/features/component/component-keep-alive.spec.js
View File

@ -295,7 +295,7 @@ describe('Component keep-alive', () => {
expect(vm.$el.innerHTML).toBe('<!---->')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-enter test-enter-active">two</div>'
'<div class="test test-enter">two</div>'
)
assertHookCalls(one, [1, 1, 1, 1, 0])
assertHookCalls(two, [1, 1, 1, 0, 0])
@ -325,7 +325,7 @@ describe('Component keep-alive', () => {
expect(vm.$el.innerHTML).toBe('<!---->')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-enter test-enter-active">one</div>'
'<div class="test test-enter">one</div>'
)
assertHookCalls(one, [1, 1, 2, 1, 0])
assertHookCalls(two, [1, 1, 1, 1, 0])
@ -369,7 +369,7 @@ describe('Component keep-alive', () => {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test">one</div>' +
'<div class="test test-enter test-enter-active">two</div>'
'<div class="test test-enter">two</div>'
)
assertHookCalls(one, [1, 1, 1, 1, 0])
assertHookCalls(two, [1, 1, 1, 0, 0])
@ -404,7 +404,7 @@ describe('Component keep-alive', () => {
}).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test">two</div>' +
'<div class="test test-enter test-enter-active">one</div>'
'<div class="test test-enter">one</div>'
)
assertHookCalls(one, [1, 1, 2, 1, 0])
assertHookCalls(two, [1, 1, 1, 1, 0])
@ -460,7 +460,7 @@ describe('Component keep-alive', () => {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test">one</div>' +
'<div class="test test-enter test-enter-active">two</div>'
'<div class="test test-enter">two</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
@ -476,7 +476,7 @@ describe('Component keep-alive', () => {
// 3. a new "one" is created and entering
expect(vm.$el.innerHTML).toBe(
'<div class="test">two</div>' +
'<div class="test test-enter test-enter-active">one</div>'
'<div class="test test-enter">one</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
@ -528,7 +528,7 @@ describe('Component keep-alive', () => {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test v-leave">foo</div>' +
'<div class="test test-enter test-enter-active">bar</div>'
'<div class="test test-enter">bar</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
@ -543,7 +543,7 @@ describe('Component keep-alive', () => {
}).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-leave">bar</div>' +
'<div class="test v-enter v-enter-active">foo</div>'
'<div class="test v-enter">foo</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(

14
test/unit/features/transition/transition-group.spec.js
View File

@ -43,8 +43,8 @@ if (!isIE9) {
expect(vm.$el.innerHTML).toBe(
`<span>` +
['a', 'b', 'c'].map(i => `<div class="test">${i}</div>`).join('') +
`<div class="test v-enter v-enter-active">d</div>` +
`<div class="test v-enter v-enter-active">e</div>` +
`<div class="test v-enter">d</div>` +
`<div class="test v-enter">e</div>` +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
@ -101,7 +101,7 @@ if (!isIE9) {
`<div class="test v-leave">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test v-enter v-enter-active">d</div>` +
`<div class="test v-enter">d</div>` +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
@ -131,7 +131,7 @@ if (!isIE9) {
`<div class="test v-leave">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test v-enter v-enter-active">d</div>` +
`<div class="test v-enter">d</div>` +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
@ -157,7 +157,7 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
`<span>` +
vm.items.map(i => `<div class="test v-enter v-enter-active">${i}</div>`).join('') +
vm.items.map(i => `<div class="test v-enter">${i}</div>`).join('') +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
@ -216,7 +216,7 @@ if (!isIE9) {
`<div class="test">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test v-enter v-enter-active">d</div>` +
`<div class="test v-enter">d</div>` +
`</span>`
)
expect(beforeEnterSpy.calls.count()).toBe(1)
@ -270,7 +270,7 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
`<span>` +
`<div class="test group-enter group-enter-active">d</div>` +
`<div class="test group-enter">d</div>` +
`<div class="test">b</div>` +
`<div class="test group-move">a</div>` +
`<div class="test group-leave group-move">c</div>` +

18
test/unit/features/transition/transition-mode.spec.js
View File

@ -33,7 +33,7 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test v-leave">one</div>' +
'<div class="test v-enter v-enter-active">two</div>'
'<div class="test v-enter">two</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
@ -78,7 +78,7 @@ if (!isIE9) {
expect(vm.$el.innerHTML).toBe('<!---->')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-enter test-enter-active">two</div>'
'<div class="test test-enter">two</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
@ -126,7 +126,7 @@ if (!isIE9) {
expect(vm.$el.innerHTML).toBe('<!---->')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-enter test-enter-active">two</div>'
'<div class="test test-enter">two</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
@ -161,7 +161,7 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test">one</div>' +
'<div class="test test-enter test-enter-active">two</div>'
'<div class="test test-enter">two</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
@ -211,7 +211,7 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test">one</div>' +
'<div class="test test-enter test-enter-active">two</div>'
'<div class="test test-enter">two</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
@ -227,7 +227,7 @@ if (!isIE9) {
// 3. a new "one" is created and entering
expect(vm.$el.innerHTML).toBe(
'<div class="test">two</div>' +
'<div class="test test-enter test-enter-active">one</div>'
'<div class="test test-enter">one</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
@ -271,7 +271,7 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test v-leave">one</div>' +
'<div class="test v-enter v-enter-active">two</div>'
'<div class="test v-enter">two</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
@ -315,7 +315,7 @@ if (!isIE9) {
expect(vm.$el.innerHTML).toBe('<!---->')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test test-enter test-enter-active">two</div>'
'<div class="test test-enter">two</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
@ -349,7 +349,7 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test">one</div>' +
'<div class="test test-enter test-enter-active">two</div>'
'<div class="test test-enter">two</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(

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

@ -30,7 +30,7 @@ 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 v-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test v-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -55,7 +55,7 @@ if (!isIE9) {
expect(vm.$el.children.length).toBe(0)
vm.ok = true
}).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -90,7 +90,7 @@ if (!isIE9) {
expect(vm.$el.children.length).toBe(0)
vm.ok = true
}).then(() => {
expect(vm.$el.children[0].className).toBe('test hello hello-active')
expect(vm.$el.children[0].className).toBe('test hello')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test hello-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -125,7 +125,7 @@ if (!isIE9) {
vm.ok = true
vm.trans = 'changed'
}).then(() => {
expect(vm.$el.children[0].className).toBe('test changed-enter changed-enter-active')
expect(vm.$el.children[0].className).toBe('test changed-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test changed-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -169,7 +169,7 @@ if (!isIE9) {
expect(vm.$el.children.length).toBe(0)
vm.ok = true
}).then(() => {
expect(vm.$el.children[0].className).toBe('test hello hello-active')
expect(vm.$el.children[0].className).toBe('test hello')
expect(enter).toHaveBeenCalled()
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test hello-active')
@ -243,7 +243,7 @@ if (!isIE9) {
_el = vm.$el.children[0]
expect(beforeEnterSpy).toHaveBeenCalledWith(_el)
expect(onEnterSpy).toHaveBeenCalledWith(_el)
expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(afterEnterSpy).not.toHaveBeenCalled()
expect(vm.$el.children[0].className).toBe('test test-enter-active')
@ -328,7 +328,7 @@ if (!isIE9) {
_el = vm.$el.children[0]
expect(beforeEnterSpy).toHaveBeenCalledWith(_el)
expect(onEnterSpy).toHaveBeenCalledWith(_el)
expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(afterEnterSpy).not.toHaveBeenCalled()
expect(vm.$el.children[0].className).toBe('test test-enter-active')
@ -369,7 +369,7 @@ if (!isIE9) {
}).then(() => {
vm.ok = true
}).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -430,7 +430,7 @@ if (!isIE9) {
vm.ok = true
}).then(() => {
expect(enterSpy).toHaveBeenCalled()
expect(vm.$el.innerHTML).toBe('<div class="nope-enter nope-enter-active">foo</div>')
expect(vm.$el.innerHTML).toBe('<div class="nope-enter">foo</div>')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toMatch(/<div( class="")?>foo<\/div>/)
}).then(done)
@ -455,7 +455,7 @@ if (!isIE9) {
expect(vm.$el.innerHTML).toBe('<!---->')
vm.ok = true
waitForUpdate(() => {
expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration / 2).then(() => {
@ -497,7 +497,7 @@ if (!isIE9) {
}).then(() => {
expect(spy).toHaveBeenCalled()
expect(vm.$el.children.length).toBe(1) // should have removed leaving element
expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -531,7 +531,7 @@ if (!isIE9) {
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')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -567,7 +567,7 @@ if (!isIE9) {
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')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -601,7 +601,7 @@ if (!isIE9) {
vm.ok = true
}).then(() => {
expect(spy).toHaveBeenCalled()
expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -632,7 +632,7 @@ if (!isIE9) {
expect(vm.$el.children.length).toBe(0)
vm.ok = true
}).then(() => {
expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active')
expect(vm.$el.children[0].className).toBe('test-anim-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test-anim-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -666,7 +666,7 @@ if (!isIE9) {
expect(vm.$el.children.length).toBe(0)
vm.ok = true
}).then(() => {
expect(vm.$el.children[0].className).toBe('test test-anim-long-enter test-anim-long-enter-active')
expect(vm.$el.children[0].className).toBe('test test-anim-long-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-anim-long-enter-active')
}).thenWaitFor(duration + 5).then(() => {
@ -692,7 +692,7 @@ if (!isIE9) {
}).$mount(el)
waitForUpdate(() => {
expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active')
expect(vm.$el.children[0].className).toBe('test test-appear')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-appear-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -713,7 +713,7 @@ if (!isIE9) {
}).$mount(el)
waitForUpdate(() => {
expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -746,7 +746,7 @@ if (!isIE9) {
expect(vm.$el.childNodes[0].textContent).toBe('')
vm.ok = true
}).then(() => {
expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter v-enter-active')
expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -786,7 +786,7 @@ 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 v-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test v-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -824,7 +824,7 @@ 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 v-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test v-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -858,7 +858,7 @@ if (!isIE9) {
expect(vm.$el.children.length).toBe(0)
vm.ok = true
}).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {

Write Preview
Loading…
Cancel
Save