## 一、过度与动画的区别 **过渡**:指元素状态的变化,比如颜色由蓝色变为绿色; **动画**:指元素位置的变化,比如从上到下。 ## 二、动画 #### 1、CSS动画 ```html Title 这是会动的文字 ``` #### 2、Vue动画 通过绑定`class`属性来实现是否添加动画 ```html Title 这是会动的文字 ``` ## 三、过渡 #### 1、CSS过渡 ```html Title 这是会变色的文字 ``` #### 2、Vue过渡 同样使用绑定`class`来控制过渡 ```html Title 这是会变色的文字 ``` ## 四、Vue出入场动画 #### 1、过渡型 在Vue3中如果组件需要过渡型动画,那么需要用``标签包裹,并且定义其CSS样式 出入场动画的CSS样式名称必须为`.v-enter-from`、`v-enter-to`、`v-enter-active`、`v-leave-from`、`v-leave-to`、`v-leave-active` ```html Title 切换 我是子组件 ``` **注意**:如果出场动画的起始值等于入场动画的结束值,那么就可以不定义出场动画的起始值,即省略`.v-leave-from` #### 2、动画型 在Vue3中定义动画型动画,需要用``标签包裹,并且定义其动画关键帧 与过渡型不同的是,动画型只需要定义入场动画`.v-enter-active`与出场动画`.v-leave-active` ```html Title 切换 我是子组件 ``` #### 3、混合型 混合型动画就是将上面两个案例合并起来 ```html Title 切换 我是子组件 ``` ## 五、列表动画(多元素) 在多元素动画时使用``标签包裹,上面的``标签只能包裹一个单元素,如果想要除新增元素外其他元素也有移动的动画,就需要添加`.v-action{transition: all .3s}`来实现 ```html Title 添加 ``` Loading... ## 一、过度与动画的区别 **过渡**:指元素状态的变化,比如颜色由蓝色变为绿色; **动画**:指元素位置的变化,比如从上到下。 ## 二、动画 #### 1、CSS动画 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 定义动画规则 */ @keyframes box-animate { 0% { transform: translateX(0); } 50% { transform: translateX(50px); } 100% { transform: translateX(0); } } .box { /* 用animation样式应用动画 */ animation: box-animate 3s; } </style> </head> <body> <div class="box">这是会动的文字</div> </body> </html> ``` #### 2、Vue动画 通过绑定`class`属性来实现是否添加动画 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 定义动画规则 */ @keyframes box-animate { 0% { transform: translateX(0); } 50% { transform: translateX(50px); } 100% { transform: translateX(0); } } .box { /* 用animation样式应用动画 */ animation: box-animate 3s; } </style> <script src="assets/js/vue.global.js"></script> </head> <body> <div id="app"> <div :class="{box:isAnimate}" @mouseout="out" @mouseover="over">这是会动的文字</div> </div> <script> Vue.createApp({ data() { return { isAnimate: false, }; }, methods: { over() { this.isAnimate = true; }, out() { this.isAnimate = false; } } }).mount('#app'); </script> </body> </html> ``` ## 三、过渡 #### 1、CSS过渡 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { background-color: red; /* 过渡样式 */ transition: 1s; } .box:hover{ background-color: blue; } </style> </head> <body> <div class="box">这是会变色的文字</div> </body> </html> ``` #### 2、Vue过渡 同样使用绑定`class`来控制过渡 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { background-color: red; /* 过渡样式 */ transition: 1s; } .boxBlue { background-color: blue; } </style> <script src="assets/js/vue.global.js"></script> </head> <body> <div id="app"> <div :class="{box:true,boxBlue:isTransition}" @mouseout="out" @mouseover="over">这是会变色的文字</div> </div> <script> Vue.createApp({ data() { return { isTransition: false, }; }, methods: { over() { this.isTransition = true; }, out() { this.isTransition = false; } } }).mount('#app'); </script> </body> </html> ``` ## 四、Vue出入场动画 #### 1、过渡型 在Vue3中如果组件需要过渡型动画,那么需要用`<transition>`标签包裹,并且定义其CSS样式 出入场动画的CSS样式名称必须为`.v-enter-from`、`v-enter-to`、`v-enter-active`、`v-leave-from`、`v-leave-to`、`v-leave-active` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 出入场动画的开始状态样式 */ .v-enter-from,.v-leave-to { opacity: 0; } /* 入场动画的结束状态样式 */ .v-enter-to{ opacity: 1; } /* 出入场动画的如何过渡 */ .v-enter-active,.v-leave-active{ transition: opacity 1s; } </style> <script src="assets/js/vue.global.js"></script> </head> <body> <div id="app"> <button @click="show">切换</button> <!-- 使用transition标签将需要动画的组件进行包裹 --> <transition> <mycpt v-if="isShow"></mycpt> </transition> </div> <template id="mycpt"> <div>我是子组件</div> </template> <script> Vue.createApp({ data() { return { isShow: false, }; }, methods: { show() { this.isShow = !this.isShow; } }, components: { mycpt: { template: '#mycpt' } } }).mount('#app'); </script> </body> </html> ``` **注意**:如果出场动画的起始值等于入场动画的结束值,那么就可以不定义出场动画的起始值,即省略`.v-leave-from` #### 2、动画型 在Vue3中定义动画型动画,需要用`<transition>`标签包裹,并且定义其动画关键帧 与过渡型不同的是,动画型只需要定义入场动画`.v-enter-active`与出场动画`.v-leave-active` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 定义入场动画关键帧 */ @keyframes box-enter { 0% { transform: translateX(-100px); } 100% { transform: translateX(0px); } } /* 定义出场动画关键帧 */ @keyframes box-leave { 0% { transform: translateX(0px); } 100% { transform: translateX(-100px); } } /* 入场动画的如何过渡 */ .v-enter-active { animation: box-enter 1s; } /* 出场动画的如何过渡 */ .v-leave-active { animation: box-leave 1s; } </style> <script src="assets/js/vue.global.js"></script> </head> <body> <div id="app"> <button @click="show">切换</button> <!-- 使用transition标签将需要动画的组件进行包裹 --> <transition> <mycpt v-if="isShow"></mycpt> </transition> </div> <template id="mycpt"> <div>我是子组件</div> </template> <script> Vue.createApp({ data() { return { isShow: false, }; }, methods: { show() { this.isShow = !this.isShow; } }, components: { mycpt: { template: '#mycpt' } } }).mount('#app'); </script> </body> </html> ``` #### 3、混合型 混合型动画就是将上面两个案例合并起来 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 出入场动画的开始状态样式 */ .v-enter-from, .v-leave-to { opacity: 0; } /* 入场动画的结束状态样式 */ .v-enter-to { opacity: 1; } /* 定义入场动画关键帧 */ @keyframes box-enter { 0% { transform: translateY(10px); } 100% { transform: translateY(0px); } } /* 定义出场动画关键帧 */ @keyframes box-leave { 0% { transform: translateY(0px); } 100% { transform: translateY(10px); } } /* 入场动画的如何过渡 */ .v-enter-active { animation: box-enter 0.3s; transition: opacity 0.3s; } /* 出场动画的如何过渡 */ .v-leave-active { animation: box-leave 0.3s; transition: opacity 0.3s; } </style> <script src="assets/js/vue.global.js"></script> </head> <body> <div id="app"> <button @click="show">切换</button> <!-- 使用transition标签将需要动画的组件进行包裹 --> <transition> <mycpt v-if="isShow"></mycpt> </transition> </div> <template id="mycpt"> <div>我是子组件</div> </template> <script> Vue.createApp({ data() { return { isShow: false, }; }, methods: { show() { this.isShow = !this.isShow; } }, components: { mycpt: { template: '#mycpt' } } }).mount('#app'); </script> </body> </html> ``` ## 五、列表动画(多元素) 在多元素动画时使用`<transition-group>`标签包裹,上面的`<tansition>`标签只能包裹一个单元素,如果想要除新增元素外其他元素也有移动的动画,就需要添加`.v-action{transition: all .3s}`来实现 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 出入场动画的开始状态样式 */ .v-enter-from, .v-leave-to { opacity: 0; } /* 入场动画的结束状态样式 */ .v-enter-to { opacity: 1; } /* 定义入场动画关键帧 */ @keyframes box-enter { 0% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } /* 定义出场动画关键帧 */ @keyframes box-leave { 0% { transform: translateY(0px); } 100% { transform: translateY(-10px); } } /* 入场动画的如何过渡 */ .v-enter-active { animation: box-enter .3s; transition: opacity .3s; } /* 出场动画的如何过渡 */ .v-leave-active { animation: box-leave .3s; transition: opacity .3s; } /* 多元素动画时其他元素如果有动作时的动画 */ .v-move { transition: all .3s; } </style> <script src="assets/js/vue.global.js"></script> </head> <body> <div id="app"> <button @click="add">添加</button> <ul> <!-- 使用transition-group进行多元素动画的包裹 --> <transition-group> <li :key="item" v-for="item in arr"><span v-text="item"></span></li> </transition-group> </ul> </div> <script> Vue.createApp({ data() { return { arr: [], }; }, methods: { add() { this.arr.unshift(this.arr.length + 1); } } }).mount('#app'); </script> </body> </html> ``` 最后修改:2025 年 10 月 27 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 👆请简单粗暴地爱我。