vue4_过渡与动画

Posted 2022-05-20 zhangzhengyang

 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>