Vue中CSS过渡动画的实现

执行过程: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>
发布了15 篇原创文章 · 获赞 1 · 访问量 231

猜你喜欢

转载自blog.csdn.net/qiguoqi777/article/details/105731920