vue动画实现
Vue动画实现方法
Vue提供了多种实现动画的方式，主要通过内置的<transition>和<transition-group>组件以及CSS/JavaScript钩子实现。
使用transition组件实现单元素动画
在Vue中可以使用<transition>组件包裹需要动画效果的元素，通过CSS类名或JavaScript钩子定义动画：
<transition name="fade">
<div v-if="show">内容</div>
</transition>对应的CSS样式：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}使用transition-group实现列表动画
对于列表元素的动画效果，可以使用<transition-group>组件：
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>对应的CSS样式：
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}使用JavaScript钩子实现动画
Vue提供了JavaScript动画钩子，可以更精细地控制动画过程：
<transition
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
:css="false"
>
<div v-if="show">内容</div>
</transition>JavaScript方法：
methods: {
beforeEnter(el) {
el.style.opacity = 0
el.style.transform = 'scale(0)'
},
enter(el, done) {
anime({
targets: el,
opacity: 1,
scale: 1,
duration: 600,
easing: 'easeInOutQuad',
complete: done
})
},
leave(el, done) {
anime({
targets: el,
opacity: 0,
scale: 0,
duration: 600,
easing: 'easeInOutQuad',
complete: done
})
}
}使用第三方动画库
可以结合第三方动画库如Animate.css实现更丰富的动画效果：
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<div v-if="show">内容</div>
</transition>状态动画
Vue的数据驱动特性可以实现基于状态变化的动画：
<div class="progress-bar" :style="{ width: progress + '%' }"></div>对应的CSS过渡：
.progress-bar {
transition: width 0.5s ease;
height: 10px;
background-color: #42b983;
}路由过渡动画
在Vue Router中实现页面切换动画：
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>对应的CSS样式：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}性能优化建议
避免使用会触发浏览器重排的CSS属性如height、margin等，优先使用transform和opacity这类合成层属性。对于复杂动画考虑使用will-change属性提示浏览器优化：
.animated-element {
will-change: transform, opacity;
}
