直接上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!--2. 自定义两组样式，来控制transition 内部的元素实现动画--> <style> /*v-enter 是进入之前，元素的起始状态*/ /*v-leave-to 离开之后动画的终止状态*/ .v-enter,.v-leave-to{ opacity: 0;/*透明度*/ transform: translateX(150px); } /*入场(离场)动画的时间段 */ .v-enter-active,.v-leave-active{ transition: all 0.8s ease; } .my-enter,.my-leave-to{ opacity: 0;/*透明度*/ transform: translateY(70px); } .my-enter-active,.my-leave-active{ transition: all 0.8s ease; } </style> </head> <body> <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <input type="button" value="toggle2" @click="flag2=!flag2"> <!--1. 使用transition元素把需要被动画控制的元素，包裹起来--> <transition> <h3 v-if="flag">这是一个H3</h3> </transition> <transition name="my"> <!--区分不同组织间动画--> <h6 v-if="flag2">这是一个H6</h6> </transition> </div> <script> var vm = new Vue({ el : '#app', data : { flag : false, flag2 : false, }, methods : { }, }); </script> </body> </html>