vue实现页面动画切换
使用 Vue 过渡组件实现动画切换
Vue 提供了内置的 <transition> 和 <transition-group> 组件，可以方便地实现页面或元素的动画切换效果。通过定义 CSS 过渡类或 JavaScript 钩子，可以实现多种动画效果。
<transition name="fade">
<router-view></router-view>
</transition>.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}结合 Vue Router 实现路由过渡动画
在 Vue Router 中，可以通过给 <router-view> 包裹 <transition> 组件来实现路由切换时的动画效果。可以为不同路由设置不同的过渡效果。
<transition :name="transitionName">
<router-view></router-view>
</transition>watch: {
'$route'(to, from) {
this.transitionName = to.meta.transition || 'fade'
}
}使用 Animate.css 库添加预设动画
Animate.css 提供了大量预设的 CSS 动画效果，可以轻松集成到 Vue 过渡中。
<transition
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<div v-if="show">内容</div>
</transition>需要先安装 Animate.css：
npm install animate.css然后在 main.js 中引入：
import 'animate.css'使用 GSAP 实现复杂动画
对于更复杂的动画需求，可以使用 GSAP 动画库。GSAP 提供了强大的时间线控制和各种缓动函数。
<transition
@enter="enter"
@leave="leave"
:css="false"
>
<div v-if="show">内容</div>
</transition>methods: {
enter(el, done) {
gsap.from(el, {
duration: 0.5,
opacity: 0,
y: 50,
onComplete: done
})
},
leave(el, done) {
gsap.to(el, {
duration: 0.5,
opacity: 0,
y: -50,
onComplete: done
})
}
}页面切换动画性能优化
为了确保动画流畅运行，需要注意以下几点：
- 使用 will-change 属性提示浏览器哪些属性会变化
- 尽量使用 transform 和 opacity 属性做动画
- 避免在动画过程中触发重排
- 对复杂动画使用 requestAnimationFrame
.animated-element {
will-change: transform, opacity;
}实现页面间共享元素过渡
通过 Vue 的 <transition-group> 和唯一 key，可以实现类似共享元素过渡的效果，让元素在不同页面间平滑过渡。
<transition-group name="list">
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
</transition-group>.list-enter-active, .list-leave-active {
transition: all 0.5s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}响应式动画设计
根据不同的设备或用户偏好，可以调整动画参数或禁用动画。可以通过媒体查询或 JavaScript 检测来动态调整动画。
computed: {
animationDuration() {
return this.$store.state.prefersReducedMotion ? 0 : 0.5
}
}
