vue-router学习9：过渡动效transition

<transition> 组件

<transition> 是 Vue 提供的一个内置组件，它可以为被包裹的元素或组件添加进入、离开和列表的过渡效果。当包裹的元素或组件的状态改变时（例如，v-if 的条件变化或路由切换），<transition> 组件会自动触发过渡效果。

Vue Router 过渡动效

在 Vue Router 中，我们通常将 <transition> 组件包裹在 <router-view> 组件外层，这样当路由发生变化时，<router-view> 中的组件切换就会带有过渡效果。

例子：

<template>  
  <div id="app">  
    <!-- 使用 transition 包裹 router-view，添加过渡效果 -->  
    <transition name="slide" mode="out-in">  
      <router-view />  
    </transition>  
  </div>  
</template>  
  
<script setup lang="ts">  
import { defineComponent } from 'vue';  
import { createRouter, createWebHistory } from 'vue-router';  
import Home from './views/Home.vue';  
import About from './views/About.vue';  
  
// 定义路由  
const routes = [  
  { path: '/', component: Home },  
  { path: '/about', component: About },  
];  
  
// 创建路由实例  
const router = createRouter({  
  history: createWebHistory(),  
  routes,  
});  
  
// 暴露路由实例，以便在模板或其他组件中使用  
defineExpose({ router });  
</script>  
  
<style scoped>  
/* 定义过渡效果的 CSS */  
.slide-enter-active, .slide-leave-active {  
  transition: all 0.5s ease;  
}  
.slide-enter, .slide-leave-to {  
  transform: translateX(100%);  
}  
.slide-leave-active, .slide-enter-to {  
  transform: translateX(0);  
}  
</style>

说明：

1. 我们使用了 <transition name="slide" mode="out-in"> 来包裹 <router-view />。

• name="slide" 指定了过渡效果的名称，这样我们就可以在 CSS 中为这个效果定义样式。mode="out-in" 表示先完成当前组件的离开过渡，然后开始新组件的进入过渡。

2. 在 <style scoped> 标签中，我们定义了过渡效果的 CSS 样式。

• .slide-enter-active 和 .slide-leave-active 是过渡的起始和结束状态，我们在这里指定了过渡效果为 transition: all 0.5s ease;表示所有属性都将以 0.5 秒的时长和 ease 函数进行过渡。
• .slide-enter 和 .slide-leave-to 是进入和离开的起始状态，我们设置 transform: translateX(100%); 使元素从右侧进入屏幕。
• .slide-leave-active 和 .slide-enter-to 是离开和进入的结束状态，我们设置 transform: translateX(0); 使元素停在原位。

3. 当路由切换时，<router-view /> 中的组件会进行滑动过渡效果。

• 从右侧滑入屏幕的是新组件，从屏幕左侧滑出的是旧组件。