脚本宝典收集整理的这篇文章主要介绍了vue动画transition，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
动画进入三个阶段 .v-enter → .v-enter-to → .v-enter-active
离开三个阶段 .v-leave → .v-leave-to → .v-leave-active
自定义属性名name
动画进入三个阶段 .自定义属性名-enter → .自定义属性名-enter-to → .自定义属性名-enter-active
离开三个阶段 .自定义属性名-leave → .自定义属性名-leave-to → .自定义属性名-leave-active
每个transITion只能有一个跟标签
<!DOCTYPE htML> <html> <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></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.COM/vue-router/dist/vue-router.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <style> #app { margin-left: 400px; } #app>div { margin-top: 400px; color: red; } .v-enter { opacity: 0; transform: translatex(-300px); } .v-leave, .v-enter-to { opacity: 1; transform: translateX(0px); } .v-leave-active, .v-enter-active { transition: all 1s; } .v-leave-to { opacity: 0; transform: translateX(300px); } /* 自定义 */ .mine-enter { opacity: 0; transform: translateY(-300px); } .mine-leave, .mine-enter-to { opacity: 1; transform: translateY(0px); } .mine-leave-active, .mine-enter-active { transition: all 1s; } .mine-leave-to { opacity: 0; transform: translateY(300px); } </style> </head> <body> <div id='app'> <button @click='change'>切换</button> <transition> <div v-show='flag'> <h1>总有人，山高路远，为你而来</h1> </div> </transition> <!-- 自定义属性名 --> <transition name='mine'> <h2 v-show='flag'>总有人，山高路远，为你而来</h2> </transition> </div> <script> const vm = new Vue({ el: '#app', data: { flag: true, }, methods: { }, created() { }, methods: { change() { this.flag = !this.flag console.LOG(this.flag); } } }) </script> </body> </html>
以上是脚本宝典为你收集整理的vue动画transition全部内容，希望文章能够帮你解决vue动画transition所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。