VUE：过渡&动画
Posted it-taosir
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE：过渡&动画相关的知识，希望对你有一定的参考价值。
VUE：过渡&动画
vue动画的理解
1）操作css的 trasition 或 animation
2）vue会给目标元素添加/移除特定的class
3）过渡的相关类名
xxx-enter-active：指定显示的transition
xxx-leave-active：指定隐藏的transition
xxx-enter/xxx-leave-to：指定隐藏时的样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>10_过渡&动画</title> <style> /* 显示或隐藏的过滤效果 */ .xxx-enter-active,.xxx-leave-active{ transition: opacity 1s; } /* 隐藏时的样式 */ .xxx-enter,.xxx-leave-to{ opacity: 0; } /* 显示的过滤效果 */ .move-enter-active{ transition: all 1s; } /* 隐藏的过滤效果 */ .move-leave-active{ transition: all 3s; } /* 隐藏时的样式 */ .move-enter,.move-leave-to{ opacity: 0; transform: translateX(20px); } </style> </head> <body> <!-- 1.vue动画的理解 操作css的trasition或animation vueh会给目标元素添加/移除特定的class 2.基本过渡动画的编码 1）在目标元素外包裹<transition name="xxx"></transition> 2）定义class样式 1>.指定过渡样式:transition 2>.指定隐藏时的样式:opacity/其他 3）过渡的类名 xxx-enter-active：指定显示的transition xxx-leave-active：指定隐藏的transition xxx-enter：指定隐藏时的样式 --> <div id="test1"> <button @click="isShow=!isShow">toggle</button> <transition name=‘xxx‘> <p v-show="isShow">hello</p> </transition> </div> <div id="test2"> <button @click="isShow=!isShow">toggle</button> <transition name=‘move‘> <p v-show="isShow">hello</p> </transition> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script> new Vue({ el:‘#test1‘, data(){ return { isShow:true } } }) new Vue({ el:‘#test2‘, data(){ return { isShow:true } } }) </script> </body> </html>
以上是关于VUE：过渡&动画的主要内容，如果未能解决你的问题，请参考以下文章