vue效果实现
Vue 效果实现方法
Vue.js 提供了多种方式实现动态效果，包括过渡动画、状态驱动的 UI 变化以及第三方动画库集成。以下是常见效果的实现方案：
过渡动画
使用 Vue 内置的 <transition> 组件实现元素进入/离开的动画效果：
<transition name="fade">
<p v-if="show">会淡入淡出的内容</p>
</transition>CSS 定义过渡样式：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}列表动画
通过 <transition-group> 实现列表项的排序动画：
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>CSS 定义移动动画：
.list-move {
transition: transform 0.8s ease;
}状态驱动动画
基于组件数据变化触发 CSS 动画：
<div :class="{ 'shake': isError }">错误时会抖动的元素</div>CSS 定义关键帧动画：
.shake {
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}第三方动画库
集成 animate.css 实现预设动画：
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<p v-if="show">动画内容</p>
</transition>指令实现动画
自定义指令处理复杂动画逻辑：
Vue.directive('pulse', {
inserted: (el) => {
el.style.transition = 'transform 0.3s';
el.addEventListener('mouseenter', () => {
el.style.transform = 'scale(1.05)';
});
el.addEventListener('mouseleave', () => {
el.style.transform = 'scale(1)';
});
}
})模板中使用：
<div v-pulse>悬停会放大的元素</div>性能优化技巧
- 对复杂动画使用
will-change: transform; - 优先使用 CSS 动画而非 JavaScript 动画
- 对高频动画使用
requestAnimationFrame - 避免动画过程中触发重排
响应式动画
结合 Vue 响应式特性实现数据驱动的动画：
export default {
data() {
return {
progress: 0
}
},
methods: {
load() {
const interval = setInterval(() => {
this.progress += 10;
if(this.progress >= 100) clearInterval(interval);
}, 300)
}
}
}模板绑定：
<div class="progress-bar" :style="{ width: progress + '%' }"></div>
