<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 /> 中的组件会进行滑动过渡效果。
- 从右侧滑入屏幕的是新组件,从屏幕左侧滑出的是旧组件。