~~~ <div id="app"> <transition mode="out-in"> <div v-if="isShow" key="hello">hello world</div> <div v-else key="bye">Bye world</div> </transition> <button @click="handleClick">切換</button> </div> ~~~ ~~~ //css .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition: opacity 2s; } ~~~ >[info] Tip:要給div加key值,不然不會會動畫效果,vue追求的DOM結構一樣就會復用。 mode參數表示動畫的模式 - out-in - in-out [TOC]