File tree Expand file tree Collapse file tree 2 files changed +69
-0
lines changed
runtime-core/src/components Expand file tree Collapse file tree 2 files changed +69
-0
lines changed Original file line number Diff line number Diff line change @@ -224,6 +224,8 @@ const BaseTransitionImpl: ComponentOptions = {
224
224
if (
225
225
oldInnerChild &&
226
226
oldInnerChild . type !== Comment &&
227
+ instance . vnode . el &&
228
+ instance . vnode . el . nodeName !== '#comment' &&
227
229
( ! isSameVNodeType ( innerChild , oldInnerChild ) || transitionKeyChanged )
228
230
) {
229
231
const leavingHooks = resolveTransitionHooks (
Original file line number Diff line number Diff line change
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 >
You can’t perform that action at this time.
0 commit comments