vue实现页面动效
Vue 实现页面动效的方法
使用 Vue 过渡动画
Vue 提供了内置的过渡系统，通过 <transition> 和 <transition-group> 组件实现元素进入/离开的动画效果。
<transition name="fade">
<div v-if="show">内容</div>
</transition>.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}结合 CSS 动画库
直接引入 CSS 动画库（如 Animate.css），通过 Vue 过渡的 enter-active-class 和 leave-active-class 属性调用。
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut">
<div v-if="show">动效内容</div>
</transition>使用 JavaScript 钩子
通过 Vue 过渡的 JavaScript 钩子（如 beforeEnter、enter）实现复杂动画逻辑，适合与 GSAP 或 Anime.js 等库结合。
methods: {
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
anime({
targets: el,
opacity: 1,
duration: 1000,
complete: done
});
}
}路由过渡动效
为 Vue Router 的页面切换添加动效，在 <router-view> 外包裹 <transition> 并指定动画名称。
<transition name="slide">
<router-view></router-view>
</transition>.slide-enter-active {
transition: transform 0.3s ease-out;
}
.slide-enter {
transform: translateX(100%);
}组件状态动画
通过 Vue 的响应式数据驱动 CSS 属性变化，实现交互式动效（如悬停、点击效果）。
<div
@mouseover="hover = true"
@mouseleave="hover = false"
:style="{ transform: hover ? 'scale(1.1)' : 'scale(1)' }">
悬停放大
</div>第三方动画库集成
使用专为 Vue 设计的动画库（如 VueUse Motion）快速实现复杂动效。
import { useMotion } from '@vueuse/motion';
const { variant, apply } = useMotion({
initial: { opacity: 0 },
enter: { opacity: 1, x: 0 },
});<div v-motion="variant">动态元素</div>注意事项
- 性能优化：避免过多使用
position: absolute和复杂滤镜，优先使用transform和opacity。 - 移动端适配：使用
will-change属性提示浏览器优化，并测试低端设备表现。 - 可访问性：为动效提供关闭选项（通过
prefers-reduced-motion媒体查询）。
