vue实现过渡动画
Vue 过渡动画的实现方式
Vue 提供了多种方式实现过渡动画，主要通过 <transition> 和 <transition-group> 组件结合 CSS 或 JavaScript 钩子实现。
使用 CSS 过渡类名
Vue 会自动为过渡元素添加特定的类名，通过定义这些类名的 CSS 样式实现动画效果。
<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 过渡类似，但使用 @keyframes 定义动画。
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% { transform: scale(0); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}使用 JavaScript 钩子
通过 JavaScript 直接操作 DOM 实现更复杂的动画效果。
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<div v-if="show">内容</div>
</transition>methods: {
beforeEnter(el) {
el.style.opacity = 0
},
enter(el, done) {
Velocity(el, { opacity: 1 }, { duration: 500, complete: done })
}
}列表过渡
使用 <transition-group> 实现多个元素的过渡效果，每个元素必须有唯一的 key。
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}初始渲染过渡
通过 appear 属性实现元素初次渲染时的过渡效果。
<transition
appear
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class"
appear-active-class="custom-appear-active-class"
>
<div>内容</div>
</transition>过渡模式
通过 mode 属性控制离开和进入的先后顺序，可选值 out-in 或 in-out。
<transition name="fade" mode="out-in">
<!-- 内容 -->
</transition>第三方动画库集成
可以方便地集成第三方动画库如 Animate.css。
<transition
name="custom-classes-transition"
enter-active-class="animate__animated animate__tada"
leave-active-class="animate__animated animate__bounceOut"
>
<div v-if="show">内容</div>
</transition>以上方法可以根据项目需求灵活组合使用，Vue 的过渡系统提供了丰富的选项实现各种动画效果。
