vue实现过度效果
Vue 过渡效果实现方法
Vue 提供了内置的 <transition> 和 <transition-group> 组件，用于在元素或组件进入/离开 DOM 时应用过渡效果。以下是实现过渡效果的几种方式：
使用 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 钩子函数实现更复杂的过渡效果：
<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 });
},
leave(el, done) {
Velocity(el, { opacity: 0 }, { duration: 500, complete: done });
}
}列表过渡
使用 <transition-group> 对 v-for 列表中的元素应用过渡效果：
<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 属性控制进入和离开过渡的时序：
<transition mode="out-in">
<div v-if="show" key="a">内容A</div>
<div v-else key="b">内容B</div>
</transition>注意事项
- 过渡效果需要元素有
v-if、v-show或动态组件切换才能触发 - 列表过渡需要为每个元素设置唯一的
key - 对于复杂的动画效果，可以结合使用 CSS 和 JavaScript 钩子
- 可以使用第三方动画库如 Velocity.js、GSAP 等增强动画效果
