执行过程:vue自动给div标签添加类样式,执行顺序:
进入时:
fade-enter、fade-enter-active
fade-enter-to,同时销毁fade-enter
销毁fade-enter-to和fade-enter-active
离开时
fade-leave、fade-leave-active
fade-leave-to,同时销毁fade-leave
销毁fade-leave-to和fade-leave-active
<transition name="fade">
<div v-show="show">hello world</div>
</transition>
methods: {
handleClick() {
this.show = !this.show;
}
}
<style>
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 3s;
}
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transition: opacity 3s;
}
</style>