~~~ <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]