vue4_过渡与动画

最新推荐文章于 2025-02-26 15:18:34 发布

weixin_30767921

最新推荐文章于 2025-02-26 15:18:34 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangzhengyang/p/11255277.html

本文详细介绍如何在Vue.js中使用过渡效果和动画，通过三个示例展示了如何为元素的显示和隐藏添加淡入淡出及弹跳效果，并利用第三方库实现更复杂的动画。文章深入解析了Vue的transition组件及其属性配置，以及如何结合CSS和JavaScript来控制动画过程。

 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" alt="">
 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" alt="">
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>