Vue 展开收起Transition过渡动画

前言

前端工作中，会碰到各种动画效果，如果你的项目用的是vue框架，就要注意里面有一个Transition的动画过渡属性，但有一点要注意，就是vue2和vue3的Transition属性会有点不一致，所以要注意自己项目中所对应的vue版本，否则会踩坑的~

<Transition> 组件

<Transition> 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发：

• 由 v-if 所触发的切换
• 由 v-show 所触发的切换

vue3的Transition的基本属性：

详细vue3官方文档

1. v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
2. v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
3. v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
4. v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
5. v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
6. v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

vue2的transition的基本属性：

详细vue2官方文档

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

过渡效果展示

为过渡效果命名

<transition name="tabs_up">
    <div v-show="isUnfold">
    </div>
</transition>
<transition name="pack_up">
    <div v-show="!isUnfold"  @click="curFn">
    </div>
</transition>

vue3的过渡动画样式

.pack_up-leave-active,.pack_up-enter-active {
    transition: all .3s;
}
.pack_up-enter-active  {
    transition-delay: .3s;
}
.pack_up-enter-from,
.pack_up-leave-to {
    transform: translateX(100%);
}
.tabs_up-leave-active,.tabs_up-enter-active {
    transition: all .3s;
}
.tabs_up-enter-active {
    transition-delay: .3s;
}
.tabs_up-enter-from, .tabs_up-leave-to {
    transform: translateX(120%);
}

vue2的过渡动画样式

.pack_up-enter-active, .pack_up-leave-active {
    transition: all .3s;
}
.pack_up-enter, .pack_up-enter-active {
    transition-delay: .3s;
}
.pack_up-enter, .pack_up-leave-to {
    transform: translateX(100%);
}
.tabs_up-enter-active, .tabs_up-leave-active {
    transition: all .3s;
}
.tabs_up-enter, .tabs_up-enter-active {
    transition-delay: .3s;
}
.tabs_up-enter, .tabs_up-leave-to {
    transform: translateX(120%);
}

结语

一定要注意自己的vue版本看对应的文档，避免踩坑哈~

如果你觉得此文对你有一丁点帮助，麻烦点个赞哈，谢谢大家。