Vue 中的动画组件包括 transition transitionGroup 两种
transition
transition 是作用于单个元素 | 组件 的一种全局内置组件
<transition name="cqc">
<Component-A />
</transition>
使用 transition 包裹某一个组件元素,并且可以给transition设置一个 叫做 name 的 attribute,之后就可以去css内自定义动画过渡效果了
tip: 如果没有给该组件设置name属性 那么该动画的类名将会以 v- 为前缀
// 这里的cqc即为上面自定义的name(类名是vue给取好自动拼接的)
.cqc-enter-from,
.cqc-leave-to {
opacity: 0;
}
.cqc-enter-to,
.cqc-leave-from {
opacity: 1;
}
.cqc-enter-active,
.cqc-leave-active {
transition: opacity 1s ease;
}
transition 的类名介绍
- v-enter-from
进入过渡的开始状态
在元素被插入之前生效, 插入之后的下一帧移除
- v-enter-active
进入过渡生效时的状态