当前位置：首页 > VUE

vue实现路由旋转切换

2026-02-22 08:31:40VUE

Vue 路由切换动画实现

使用 Vue Router 结合过渡动画实现路由切换效果，核心是通过 Vue 的 <transition> 组件和 CSS 动画。

安装依赖 确保项目中已安装 vue-router 和 vue，若未安装可通过以下命令安装：

npm install vue-router vue

基础路由配置 在 router/index.js 中配置路由：

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
});

export default router;

添加过渡动画 在 App.vue 中使用 <transition> 包裹 <router-view>：

<template>
  <router-view v-slot="{ Component }">
    <transition name="rotate" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
.rotate-enter-active,
.rotate-leave-active {
  transition: all 0.5s ease;
}

.rotate-enter-from {
  opacity: 0;
  transform: rotateY(90deg);
}

.rotate-leave-to {
  opacity: 0;
  transform: rotateY(-90deg);
}
</style>

进阶旋转动画效果

通过 CSS 自定义旋转轴和动画曲线增强效果：

.rotate-enter-active {
  animation: rotate-in 0.5s ease-out;
}

.rotate-leave-active {
  animation: rotate-out 0.5s ease-in;
}

@keyframes rotate-in {
  from {
    transform: rotateY(-90deg) scale(0.8);
    opacity: 0;
  }
  to {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes rotate-out {
  from {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }
  to {
    transform: rotateY(90deg) scale(0.8);
    opacity: 0;
  }
}

动态路由过渡

根据路由路径动态切换动画样式：

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const transitionName = ref('fade');

watch(() => route.path, (newPath) => {
  transitionName.value = newPath === '/' ? 'rotate' : 'slide';
});
</script>

<template>
  <router-view v-slot="{ Component }">
    <transition :name="transitionName">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

3D 旋转效果

启用 CSS 3D 变换提升视觉效果：

.rotate-enter-active {
  transform-style: preserve-3d;
  perspective: 1000px;
  animation: rotate-3d-in 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes rotate-3d-in {
  0% {
    transform: rotateX(70deg) translateZ(-200px);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg) translateZ(0);
    opacity: 1;
  }
}

注意事项