~~~ @keyframes bounce-in{ 0% { transform: scale(0) } 50%{ transform: scale(1.5) } 100%{ transform: scale((1)) } } .fade-enter-active{ transform-origin: left center; animation: bounce-in 1s; } .fade-leave-active{ transform-origin: left center; animation: bounce-in 1s reverse; } ~~~ ~~~ <div id="app"> <transition name="fade"> <div v-if="isShow">hello world</div> </transition> <button @click="handleClick">切换</button> </div> <script> new Vue({ el:"#app", data:{ isShow:false }, methods:{ handleClick(){ this.isShow = !this.isShow; } } }) </script> ~~~