文章参考
问题描述
今天在学习Vue动画的时候，发现对组件的属性不熟悉，以下作为复习的内容
概念解释
- 动画状态分为“开始状态” ---- “过渡状态” ----“结束状态”
- 显示： enter ------ enter-active ------- enter-to
- 隐藏： leave ------- leave-active ------ leave-to
案例
自定义动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../js/vue.js"></script> </head> <style> .box{ height: 100px; width: 100px; background-color: rebeccapurple; display: inline-block; } .fade-enter{ opacity: 0; background-color: green; transform: rotate(0deg); transform: scale(2, 4) } .fade-enter-active{ transition: all 3s; } .fade-enter-to{ opacity: 1; background-color: red; transform: rotate(360deg); } .fade-leave{ opacity: 1; } .fade-leave-active{ transition: all 3s; } .fade-leave-to{ opacity: 0; transform: translate(300px, 200px); } </style> <body> <div id="app"> <transition name='fade'> <div class="box" v-if='isShow'></div> </transition> <div> <button @click='toggleAction'>切换</button> </div> </div> </body> <script> /** */ var app = new Vue({ el: '#app', data: function () { return { isShow: true } }, methods: { toggleAction: function () { this.isShow = !this.isShow; } }, }) </script> </html> <transition name='fade'>中的name值是作为样式的名字- 触发动画尽量用
v-if - 因为name=‘fade’，所以进入的样式是
fade-enter、fade-enter-active、fade-enter-to- fade-enter 表示显示的初始样式
- fade-enter-to 表示的是显示最后的样式
- fade-enter-active 表示的是从fade-enter到fade-enter-to样式过渡的时间
- 因为name=‘fade’，所以进入的样式是
fade-leave、fade-leave-active、fade-leave-to- fade-leave 表示删除的初始样式
- fade-leave-to 表示的是删除最后的样式
- fade-leave-active 表示的是从fade-leave 到fade-leave-to样式过渡的时间
引用animate.css动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="../js/animate.css"> <script src="../js/vue.js"></script> </head> <style> .box{ height: 100px; width: 100px; background-color: rebeccapurple; display: inline-block; } </style> <body> <div id="app"> <transition leave-active-class='flash animated' enter-active-class='rollIn animated' > <div class="box" v-if='isShow'></div> </transition> <div> <button @click='toggleAction'>切换</button> </div> </div> </body> <script> var app = new Vue({ el: '#app', data: function () { return { isShow: true } }, methods: { toggleAction: function () { this.isShow = !this.isShow; } }, }) </script> </html> 动画钩子函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="../js/animate.css"> <script src="../js/vue.js"></script> </head> <style> .box{ height: 100px; width: 100px; background-color: rebeccapurple; display: inline-block; } </style> <body> <div id="app"> <transition leave-active-class='flash animated' enter-active-class='rollIn animated' v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <div class="box" v-if='isShow'></div> </transition> <div> <button @click='toggleAction'>切换</button> </div> </div> </body> <script> /** */ var app = new Vue({ el: '#app', data: function () { return { isShow: true } }, methods: { toggleAction: function () { this.isShow = !this.isShow; }, beforeEnter: function () { console.log('beforeEnter') }, enter: function () { console.log('enter') }, afterEnter: function () { console.log('afterEnter') }, enterCancelled: function () { console.log('enterCancelled') }, beforeLeave: function () { console.log('beforeLeave') }, leave: function () { console.log('leave') }, afterLeave: function () { console.log('afterLeave') }, leaveCancelled: function () { console.log('leaveCancelled') } }, }) </script> </html> 案例解析
来源：51CTO
作者：胖鹅68
链接：https://blog.csdn.net/hbiao68/article/details/100165855