【vue】实现组件的动画过渡效果

【vue】实现组件的动画过渡效果

transition 包裹

如果想通过v-if或v-show添加或移除某个组件时实现过渡效果，可以用 <transition>组件将其包裹住。

<transition>
<h1 v-show="show">hello,tansition!</h1>
</transition>

transition 包含的阶段

transition将过渡效果划分为几个过程，这些过程可作为动画效果实施的选择器。

进入阶段：
v-enter-active：整个过渡状态过程
v-enter：开始进入过渡状态的时刻
v-enter-to：结束过渡状态的时刻
离开阶段：
v-leave-active：整个过渡状态过程
v-leave：开始进入过渡状态的时刻
v-leave-to：结束过渡状态的时刻

transition 相关的css 选择器

元素名.阶段名
元素name属性-阶段名