vue 实现跳转动画
Vue 实现跳转动画的方法
使用 Vue Router 的过渡效果
Vue Router 内置支持过渡效果，可以通过 <transition> 组件结合 CSS 实现页面跳转动画。在路由视图外层包裹 <transition> 并定义动画样式。
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>CSS 动画定义：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}动态路由过渡
根据路由变化动态设置过渡效果，通过监听路由变化修改过渡名称。
<transition :name="transitionName">
<router-view></router-view>
</transition>data() {
return {
transitionName: 'slide-left'
}
},
watch: {
'$route'(to, from) {
const toDepth = to.meta.depth
const fromDepth = from.meta.depth
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}使用 Animate.css 库
集成第三方动画库快速实现丰富效果，安装后直接应用预设动画类。
npm install animate.css<transition
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<router-view></router-view>
</transition>组件内守卫控制动画
利用路由守卫在跳转前后执行动画逻辑，适用于需要精细控制的场景。
beforeRouteEnter(to, from, next) {
// 进入前触发动画
document.querySelector('.page-container').classList.add('fade-out')
setTimeout(() => next(), 500)
},
beforeRouteLeave(to, from, next) {
// 离开前触发动画
this.$el.classList.add('fade-out')
setTimeout(next, 500)
}状态管理配合动画
通过 Vuex 管理全局动画状态，实现跨组件协调的动画效果。
// store.js
state: {
isLoading: false
},
mutations: {
setLoading(state, payload) {
state.isLoading = payload
}
}// 路由跳转时
this.$store.commit('setLoading', true)
setTimeout(() => {
this.$router.push('/target')
this.$store.commit('setLoading', false)
}, 1000)注意事项
- 过渡模式
mode="out-in"可防止相邻路由组件同时执行动画 - 移动端注意硬件加速优化，使用
transform替代top/left属性 - 复杂动画考虑使用 GSAP 等专业动画库
- 始终定义
leave-active类确保离开动画完整执行
