vue3 的过渡组件体验这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战概念 Vue 提供

这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战

概念

Vue 提供了一些抽象概念，可以帮助处理过渡和动画，特别是在响应某些变化时。这些抽象的概念包括：

在 CSS 和 JS 中，使用内置的 <transition> 组件来钩住组件进入和离开 DOM。
过渡模式，以便你在过渡期间编排顺序。
在处理多个元素位置更新时，使用 <transition-group> 组件，通过 FLIP 技术来提高性能。
使用 watchers 来处理应用中不同状态的过渡。

使用class进行过渡。

尽管 <transition> 组件对于组件的进入和离开非常有用，但你也可以通过添加一个条件 class 来激活动画，而无需挂载组件。

<div :class="{ shake: noActivated }">
    <button @click="noActivated = true">Click me</button>
    <span v-if="noActivated">Oh no!</span>
</div>

结合`<router-view />`

<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition || 'fade'" mode="out-in">
    <keep-alive include="Home">
      <component :is="Component" :key="route.path" />
    </keep-alive>
  </transition>
</router-view>

你可以根据你的需求选择你的过渡模式

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了过渡模式

in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡，完成之后新元素过渡进入。

我们可以用它来协调更具表现力的动作，例如折叠卡片，如下所示。实际上是两个元素在彼此之间转换，但是由于开始状态和结束状态的比例是相同的：水平为0，它看起来就像一个流体运动。这种轻描淡写对于真实的 UI 微交互非常有用

如果你想自定以过渡的动画效果，你需要对transition组件的name属性自定义。并在css中写入对应的样式。

例如：

<transition name="display" mode="out-in">
    ···
</transition>

<style lang="scss" scoped>
.display-enter-active {
  transition: all 1s ease-in-out;
}
.display-leave-active {
  transition: all 2s ease-in-out;

  .css,
  .html {
    transition: all 1s ease-in-out;
  }
}

.display-enter-from {
  opacity: 0;
  transform: scale(0.5);
}

.display-leave-to {
  opacity: 0;
  .css {
    right: 50%;
    transform: translateX(50%);
  }
  .html {
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>

vue3 的 过渡组件体验

概念

结合<router-view />

vue3 的过渡组件体验

结合`<router-view />`