File tree 1 file changed +7
-5
lines changed
1 file changed +7
-5
lines changed Original file line number Diff line number Diff line change 15
15
border : 1px solid # 666 ;
16
16
box-sizing : border-box;
17
17
}
18
+ /* 1. declare transition */
18
19
.fade-move , .fade-enter-active , .fade-leave-active {
19
20
transition : all .5s cubic-bezier (.55 , 0 , .1 , 1 );
20
21
}
21
- .fade-enter {
22
+ /* 2. declare enter from and leave to state */
23
+ .fade-enter , .fade-leave-to {
22
24
opacity : 0 ;
23
- transform : scaleY (0 ) translate (30px , 0 );
25
+ transform : scaleY (0.01 ) translate (30px , 0 );
24
26
}
27
+ /* 3. ensure leaving items are taken out of layout flow so that moving
28
+ animations can be calculated correctly. */
25
29
.fade-leave-active {
26
30
position : absolute;
27
- opacity : 0 ;
28
- transform : scaleY (0.01 ) translate (30px , 0 );
29
31
}
30
32
</ style >
31
33
< script src ="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js "> </ script >
32
34
<!-- Delete ".min" for console warnings in development -->
33
- < script src ="../../dist/vue.min. js "> </ script >
35
+ < script src ="../../dist/vue.js "> </ script >
34
36
</ head >
35
37
< body >
36
38
< div id ="el ">
You can’t perform that action at this time.
0 commit comments