demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style style="text/css"> .sni-enter-active,.sni-leave-enter { transition:all 1.5s linear; } .sni-enter,.sni-leave-active { opacity:0.5; transform:translateX(100px); } </style> </head> <body> <div id="my"> <button @click="show = !show">查看我的变化</button> <transition name="sni"> <div v-if="show"> 请看我的变化 </div> </transition> </div> <script> new Vue ({ el:'#my', data:{ show:true } }) </script> </body> </html>
效果：