- vue动画的理解
操作css的trasition或animation
vue会给目标元素添加/移除特定的class - 基本过渡动画的编码
1). 在目标元素外包裹
2). 定义class样式
1>. 指定过渡样式: transition
2>. 指定隐藏时的样式: opacity/其它 - 过渡的类名
xxx-enter-active: 指定显示的transition
xxx-leave-active: 指定隐藏的transition
xxx-enter: 指定隐藏时的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡&动画1</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> <div id="demo"> <button @click="show = !show">Toggle</button> <transition name="xxx"> <p v-show="show">hello</p> </transition> </div> <hr> <div id="demo2"> <button @click="show = !show">Toggle2</button> <transition name="move"> <p v-show="show">hello</p> </transition> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { show: true } }) new Vue({ el: '#demo2', data: { show: true } }) </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡&动画2</title> <style> .bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } </style> </head> <body> <div id="example-2"> <button @click="show = !show">Toggle show</button> <br> <transition name="bounce"> <p v-if="show" style="display: inline-block">Lorem</p> </transition> </div> <script type="text/javascript" src="../js/vue.js"></script> <script> new Vue({ el: '#example-2', data: { show: true } }) </script> </body> </html> 文章来源: https://blog.csdn.net/lizhiqiang1217/article/details/90314401