~~~ //css .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 3s; } .fade-leave-to{ opacity:0; } .fade-leave-active{ transition: opacity 4s; } ~~~ ~~~ <div id="app"> <transition name="fade"> <div v-if="isShow">hello world</div> </transition> <button @click="handleClick">切换</button> </div> ~~~ ~~~ new Vue({ el:"#app", data:{ isShow:false }, methods:{ handleClick(){ this.isShow = !this.isShow; } } }) ~~~