通过vue ＜Transition＞ 组件实现过渡动画

官方文档

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

        由 v-if 所触发的切换

        由 v-show 所触发的切换

        由特殊元素 <component> 切换的动态组件

         改变特殊的 key 属性

1.基本使用：

<transition enter-active-class="animate__animated" appear>
    <div>
    </div>
</transition>

enter-active-class属性指定了元素进入时的动画类名，.appear属性表示元素第一次渲染时也会执行过渡效果。

2.其他属性：

• name: 指定过渡的名称，用于自动生成过渡类名，默认为"v"。
• appear: 是否在初始渲染时使用过渡效果。
• css: 是否使用 CSS 过渡类。
• type: 指定过渡的类型，可以是"transition"或"animation"。
• mode: 控制过渡的模式，可以是"in-out"、"out-in"或不设置。
• enter-class: 进入过渡的类名。
• leave-class: 离开过渡的类名。
• enter-active-class: 进入过渡的活动类名。
• leave-active-class: 离开过渡的活动类名。
• appear-class: 初始渲染时的类名。
• appear-active-class: 初始渲染时的活动类名。

通过在<transition>组件中设置这些属性，可以实现不同类型的过渡效果，如淡入淡出、滑动、旋转等。这样可以为页面增添动态和交互性，提升用户体验。