<template> <div id="bigData"> <button @click="flag= !flag">按钮1</button> <transition> <div v-show="this.flag">我要动起来1</div> </transition> <hr /> <button @click="flag2= !flag2">按钮2</button> <transition name="my"> <div v-show="this.flag2">我要动起来2</div> </transition> </div> </template> <script> export default { data() { return { flag: true, flag2: true }; } }; </script> <style> /* v-enter 动画进入之前 此时还没开始进入 v-leave-to离开之后 终止状态 */ .v-enter, .v-leave-to { opacity: 1; transform: translateX(150px); } /* v-leave-active 离场动画的时间段 v-enter-active 入场动画的时间段 */ .v-leave-active, .v-enter-active { transition: all 0.8s ease; opacity: 0.5; } /* ---------- */ /* my 自定义名称 区分不同组动画 */ /* v-enter 动画进入之前 此时还没开始进入 v-leave-to离开之后 终止状态 */ .my-enter, .my-leave-to { opacity: 1; transform: translateY(150px); } /* my-leave-active 离场动画的时间段 my-enter-active 入场动画的时间段 */ .my-leave-active, .my-enter-active { transition: all 0.8s ease; opacity: 0.5; } </style> 