vue4_过渡与动画

 1 <template>
 2     <div>
 3         <button @click="show = !show">切换</button>
 4         <transition name="fade">
 5             <div class="box" v-if="show">撩课学院</div>
 6         </transition>
 7     </div>
 8 </template>
 9 
10 <script>
11     export default {
12         name: "TransitionAndAnimate",
13         data(){
14             return {
15                 show: false
16             }
17         }
18     }
19 </script>
20 
21 <style scoped>
22     .box{
23         width: 200px;
24         height: 200px;
25         background-color: red;
26         color: #fff;
27         font-size: 20px;
28         display: flex;
29         justify-content: center;
30         align-items: center;
31     }
32 
33     .fade-enter, .fade-leave-to{
34         opacity: 0;
35         transform: translateX(200px) scale(3);
36     }
37 
38     .fade-enter-active, .fade-leave-active{
39         transition: all 2s ease-in-out;
40     }
41 </style>

 1 <template>
 2     <div>
 3         <button @click="flag = !flag">切换</button>
 4         <p></p>
 5         <transition name="bounce">
 6             <img v-if="flag" :src="pic" >
 7         </transition>
 8     </div>
 9 </template>
10 
11 <script>
12     import pic from ‘@/assets/img_02.jpg‘
13 
14     export default {
15         name: "TransitionAndAnimateTwo",
16         data() {
17             return {
18                 pic: pic,
19                 flag: false
20             }
21         }
22     }
23 </script>
24 
25 <style scoped>
26     .bounce-enter-active {
27          animation: bounce 1s;
28     }
29 
30     .bounce-leave-active {
31         animation: bounce 1s reverse;
32     }
33 
34     @keyframes bounce {
35         0% {
36             transform: scale(0);
37         }
38         25% {
39             transform: scale(0.2);
40         }
41         50% {
42             transform: scale(0.4);
43         }
44         75% {
45             transform: scale(0.6);
46         }
47         100% {
48             transform: scale(1);
49         }
50     }
51 </style>

 1 <template>
 2     <div>
 3         <button @click="flag = !flag">切换</button>
 4         <p></p>
 5         <transition
 6             enter-active-class="animated rollIn"
 7             leave-active-class="animated rollOut"
 8             :duration="{ enter: 1000, leave: 500 }"
 9         >
10             <img v-if="flag" :src="pic" >
11         </transition>
12     </div>
13 </template>
14 
15 <script>
16     import pic from ‘@/assets/img_02.jpg‘
17     import animate from ‘animate.css‘
18 
19     export default {
20         name: "TransitionAndAnimateThree",
21         data() {
22             return {
23                 pic: pic,
24                 flag: false
25             }
26         }
27     }
28 </script>
29 
30 <style scoped>
31 
32 </style>