[javascript动画钩子](https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90) ~~~ @before-enter @enter @after-enter ~~~ ~~~ <div id="app"> <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter"> <div v-if="isShow">hello world</div> </transition> <button @click="handleClick">切换</button> </div> ~~~ ~~~ var vm = new Vue({ data: { isShow: true }, methods: { handleClick() { this.isShow = !this.isShow; }, handleBeforeEnter(el) { el.style.color = "red" }, handleEnter(el, done) { setTimeout(() => { el.style.color = "blue" }, 2000) setTimeout(() => { /* 表示动画结束 */ done() }, 4000) }, handleAfterEnter(el) { el.style.color = "#333" } } }).$mount("#app") ~~~