transition过渡

基础使用

• vue3 组件内

<template>
    <transition name="slide-fade">
        <div>组件需要用一个外部标签包裹</div?
    </transition>
</template>

• vue3 配合路由

<template>
  <router-view v-slot="{ Component }">
    <transition name="slide-fade">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

动画效果

透明+比例+左右

.scale-slide-enter-active, .scale-slide-leave-active
  position absolute
  transition all 0.8s ease

.scale-slide-enter-from
  transform translateX(100%)
  opacity 0.5

.scale-slide-enter-to
  transform translateX(0)
  opacity 1

.scale-slide-leave-from
  transform scale(1)
  opacity 1

.scale-slide-leave-to
  transform scale(0.8)
  opacity 0

左右渐变滑动过渡

.slide-fade-enter-active
  transition all 0.4s ease-out 0.4s

.slide-fade-leave-active
  transition all 0.4s cubic-bezier(1, 0.5, 0.8, 1)

.slide-fade-enter-from, .slide-fade-leave-to
  transform tran