vue3 使用transition创建路由动画（超详细）

__Rain__

已于 2023-02-06 19:02:39 修改

阅读量4.3k

点赞数 4

分类专栏： vue 文章标签： vue.js

于 2022-12-08 17:12:04 首次发布

本文链接：https://blog.csdn.net/m0_72436362/article/details/128239457

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先在组件中使用transition标签的前提是要写入在RouterView中，虽然不会报错，但是会有警告，而且路由动画不会生效

vue官网的一句话，transition 和 keep-alive 现在必须通过 v-slot API 在 RouterView 内部使用

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

下面是我的路由切换,注释的很详细，认真看

<template>
  <div class="s">
    <Router-Link to="/home">home</Router-Link>
    <br />
    <Router-Link to="/about">about</Router-Link>
    <div class="box">
      <RouterView v-slot="{ Component }" >
        <transition name="fade">
            <component :is="Component" />
        </transition>
      </RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs } from "vue";
</script>
<style lang="less" scoped>
html,
body,
#app,
.box {
  margin: 0 auto;
  width: 50%;
  height: 100%;
  background: bisque;
}
.fade-enter-from{   /* 进入时的透明度为0 和 刚开始进入时的原始位置通过active透明度渐渐变为1 */  
  opacity: 0;
  transform: translateX(-100%);
}

.fade-enter-to{   /*定义进入完成后的位置 和 透明度 */
  transform: translateX(0%);
  opacity: 1; 
}

.fade-leave-active,.fade-enter-active {
    transition: all 0.5s ease-out;
}

.fade-leave-from { /* 页面离开时一开始的css样式,离开后为leave-to，经过active渐渐透明 */
  transform: translateX(0%);
  opacity: 1;
}

.fade-leave-to{   /* 这个是离开后的透明度通过下面的active阶段渐渐变为0 */  
  transform: translateX(100%);
  opacity: 0;
}
</style>

官方的路由切换动画名称原文 // v-enter v：指的是transition的name名称
在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除
通过下面的效果你能够直观的明白样式的切换

当你的动画未生效时，考虑以下几点 vue官方的回答：

:key=xxx 给过渡标签加上key，这样每次切换时都会进行过渡动画的实现。

并且过渡动画只会在下面四个情况生效

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

另外transition还有一个mode属性（个人解答）：

in-out ：新dom元素进入完毕已经到达地点后旧dom元素才会离开 a是要进入的dom，b是要离开的dom，b要等待a进入完成后，b才会执行自己的离开动画。

  <div class="s">
    <Router-Link to="/home">home</Router-Link>
    <br />
    <Router-Link to="/about">about</Router-Link>
    <div class="box">
      <RouterView v-slot="{ Component }" >
        <transition name="fade" mode="in-out">  //<==在这呢
            <component :is="Component" />
        </transition>
      </RouterView>
    </div>
  </div>

in-out的效果

out-in:要离开的dom元素离开完毕后，要进入的dom元素才开始进入。

  <div class="s">
    <Router-Link to="/home">home</Router-Link>
    <br />
    <Router-Link to="/about">about</Router-Link>
    <div class="kkk">
      <RouterView v-slot="{ Component }" >
        <transition name="fade" mode="out-in">  //<==在这呢
            <component :is="Component" />
        </transition>
      </RouterView>
    </div>
  </div>