随便写写Vue的全局内置的 动画 transition 组件

 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

        进入过渡生效时的状态