vue3过渡组件-Transition

过渡组件-Transition

Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过渡和动画。
这里介绍<Transition>组件，过渡组件一共有 6 个应用于进入与离开过渡效果的 CSS class

进入或离开可以由以下的条件之一触发：
● 由 v-if 所触发的切换
● 由 v-show 所触发的切换
● 由特殊元素 <component> 切换的动态组件
● 改变特殊的 key 属性
具体示例请看参考链接：Transition

使用

你可以给过渡组件命名，例如：name="fade"
那么过渡组件会应用以fade命名的css动画

<Transition name="fade">
  ...
</Transition>

// css部分
// 进入时触发
.slide-fade-enter-active {
  // css动画效果......
}
// 离开时触发
.slide-fade-leave-active {
  // css动画效果......
}

首次即触发

过渡组件在页面首次出现时不会触发过渡效果，如果你需要首次即触发，则需要添加appears属性

<Transition appear>
  ...
</Transition>

过渡模式

默认情况下，过渡组件的离开和开始是同时进行的，你可能会看到两个组件切换时同时在变化，这样可能导致页面视觉混乱。

我们可能想要先执行离开动画，然后在其完成之后再执行元素的进入动画。我们可以通过向 <Transition> 传入一个 mode prop 来实现这个行为：

  <Transition name="fade" mode="out-in" appear>
    ...
  </Transition>

你也可以将过渡组件封装，用于多种场景

<template>
  <Transition name="slideRight" mode="out-in" appear>
    <!-- 向内传递插槽内容 -->
    <slot></slot>
  </Transition>
</template>