Skip to content

Commit d2d212b

Browse files
committed
fix(BaseTransition): element comment tag condition
1 parent 78b8615 commit d2d212b

File tree

2 files changed

+69
-0
lines changed

2 files changed

+69
-0
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,8 @@ const BaseTransitionImpl: ComponentOptions = {
224224
if (
225225
oldInnerChild &&
226226
oldInnerChild.type !== Comment &&
227+
instance.vnode.el &&
228+
instance.vnode.el.nodeName !== '#comment' &&
227229
(!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)
228230
) {
229231
const leavingHooks = resolveTransitionHooks(
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<script src="../../dist/vue.global.js"></script>
2+
3+
<div id="app">
4+
</div>
5+
6+
<script>
7+
Vue.createApp({
8+
components: {
9+
one: {
10+
name: 'one',
11+
template: '<div>one</div>'
12+
},
13+
two: {
14+
name: 'two',
15+
template: '<div v-if="false">two</div>'
16+
},
17+
three: {
18+
name: 'three',
19+
template: '<div>three</div>'
20+
},
21+
},
22+
template: `
23+
<button @click="counter = (counter % 3) + 1">Step</button>
24+
to cycle through counter: {{ counter }}
25+
<div class="transition">
26+
<Transition name="slide-up" mode="out-in">
27+
<component :is="names[counter]" :key="counter"></component>
28+
</Transition>
29+
</div>
30+
`,
31+
data: () => ({
32+
showModal: false,
33+
counter: 1,
34+
names: {
35+
1: 'one',
36+
2: 'two',
37+
3: 'three',
38+
},
39+
})
40+
}).mount('#app')
41+
</script>
42+
43+
<style>
44+
.transition {
45+
display: flex;
46+
position: absolute;
47+
inset: 0;
48+
align-items: center;
49+
justify-content: center;
50+
pointer-events: none;
51+
}
52+
53+
.slide-up-enter-active,
54+
.slide-up-leave-active {
55+
transition: all 0.25s ease-out;
56+
}
57+
58+
.slide-up-enter-from {
59+
opacity: 0;
60+
transform: translateY(30px);
61+
}
62+
63+
.slide-up-leave-to {
64+
opacity: 0;
65+
transform: translateY(-30px);
66+
}
67+
</style>

0 commit comments

Comments
 (0)