当前位置：首页 > VUE

vue 实现跳转动画

2026-01-22 01:54:58VUE

Vue 路由跳转动画实现

在 Vue 中实现页面跳转动画可以通过 Vue Router 的过渡效果和 CSS 动画结合完成。以下是几种常见方法：

使用 Vue Transition 组件

在 App.vue 或布局组件中包裹 <router-view>，并添加过渡效果：

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

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

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

实现滑动动画

通过 CSS transform 属性实现左右滑动效果：

vue 实现跳转动画

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.5s ease;
}

.slide-left-enter-from {
  transform: translateX(100%);
}

.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter-from {
  transform: translateX(-100%);
}

.slide-right-leave-to {
  transform: translateX(100%);
}

动态过渡名称

根据路由变化方向应用不同动画：

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

const router = useRouter()
const transitionName = ref('slide-left')

watch(router.currentRoute, (to, from) => {
  const toDepth = to.meta.depth || 0
  const fromDepth = from.meta.depth || 0
  transitionName.value = toDepth > fromDepth ? 'slide-left' : 'slide-right'
})
</script>

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

使用 GSAP 实现高级动画

安装 GSAP 库实现更复杂的动画效果：

vue 实现跳转动画

npm install gsap

在路由守卫中使用 GSAP：

import { gsap } from 'gsap'

router.beforeEach((to, from, next) => {
  gsap.to('.page-container', {
    duration: 0.5,
    opacity: 0,
    y: 50,
    onComplete: next
  })
})

router.afterEach(() => {
  gsap.from('.page-container', {
    duration: 0.5,
    opacity: 0,
    y: -50
  })
})

页面单独控制动画

在页面组件中定义进入和离开动画：

<script>
export default {
  beforeRouteLeave(to, from, next) {
    this.animateOut(() => next())
  },
  methods: {
    animateOut(callback) {
      // 自定义离开动画逻辑
      callback()
    }
  }
}
</script>