【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属性-阶段名