Skip to content

Commit be93185

Browse files
wh.huajieyuyyx990803
authored andcommitted
fix(BaseTransition): modify review problem
1 parent 7837fd8 commit be93185

File tree

3 files changed

+78
-68
lines changed

3 files changed

+78
-68
lines changed

packages/runtime-core/src/components/BaseTransition.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ const BaseTransitionImpl: ComponentOptions = {
214214
oldInnerChild &&
215215
oldInnerChild.type !== Comment &&
216216
instance.vnode.el &&
217-
instance.vnode.el.nodeName !== '#comment' &&
217+
instance.vnode.el.nodeType !== 8 &&
218218
!isSameVNodeType(innerChild, oldInnerChild)
219219
) {
220220
const leavingHooks = resolveTransitionHooks(

packages/vue/__tests__/e2e/Transition.spec.ts

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1141,6 +1141,83 @@ describe('e2e: Transition', () => {
11411141

11421142
test(
11431143
'transition on child components with empty root node',
1144+
async () => {
1145+
await page().evaluate(() => {
1146+
const { createApp, ref } = (window as any).Vue
1147+
createApp({
1148+
template: `
1149+
<div id="container">
1150+
<transition name="test">
1151+
<component class="test" :is="view"></component>
1152+
</transition>
1153+
</div>
1154+
<button id="toggleBtn" @click="click">button</button>
1155+
<button id="changeViewBtn" @click="change">button</button>
1156+
`,
1157+
components: {
1158+
one: {
1159+
template: '<div v-if="false">one</div>'
1160+
},
1161+
two: {
1162+
template: '<div>two</div>'
1163+
}
1164+
},
1165+
setup: () => {
1166+
const toggle = ref(true)
1167+
const view = ref('one')
1168+
const click = () => (toggle.value = !toggle.value)
1169+
const change = () =>
1170+
(view.value = view.value === 'one' ? 'two' : 'one')
1171+
return { toggle, click, change, view }
1172+
}
1173+
}).mount('#app')
1174+
})
1175+
expect(await html('#container')).toBe('<!--v-if-->')
1176+
1177+
// change view -> 'two'
1178+
await page().evaluate(() => {
1179+
;(document.querySelector('#changeViewBtn') as any)!.click()
1180+
})
1181+
// enter
1182+
expect(await classWhenTransitionStart()).toStrictEqual([
1183+
'test',
1184+
'test-enter-from',
1185+
'test-enter-active'
1186+
])
1187+
await nextFrame()
1188+
expect(await classList('.test')).toStrictEqual([
1189+
'test',
1190+
'test-enter-active',
1191+
'test-enter-to'
1192+
])
1193+
await transitionFinish()
1194+
expect(await html('#container')).toBe('<div class="test">two</div>')
1195+
1196+
// change view -> 'one'
1197+
await page().evaluate(() => {
1198+
;(document.querySelector('#changeViewBtn') as any)!.click()
1199+
})
1200+
// leave
1201+
expect(await classWhenTransitionStart()).toStrictEqual([
1202+
'test',
1203+
'test-leave-from',
1204+
'test-leave-active'
1205+
])
1206+
await nextFrame()
1207+
expect(await classList('.test')).toStrictEqual([
1208+
'test',
1209+
'test-leave-active',
1210+
'test-leave-to'
1211+
])
1212+
await transitionFinish()
1213+
expect(await html('#container')).toBe('<!--v-if-->')
1214+
},
1215+
E2E_TIMEOUT
1216+
)
1217+
1218+
// issue https://github.com/vuejs/core/issues/7649
1219+
test(
1220+
'transition with v-if at component root-level',
11441221
async () => {
11451222
await page().evaluate(() => {
11461223
const { createApp, ref } = (window as any).Vue

packages/vue/examples/transition/transition_v-if.html

Lines changed: 0 additions & 67 deletions
This file was deleted.

0 commit comments

Comments
 (0)