vue实现过渡效果
Vue 过渡效果实现方法
Vue 提供了内置的 <transition> 和 <transition-group> 组件，用于在元素或组件进入/离开 DOM 时应用过渡效果。
基本过渡效果
使用 <transition> 组件包裹需要过渡的元素，通过 CSS 类名定义过渡样式：
<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;
}自定义过渡类名
可以覆盖默认的类名，与第三方动画库（如 Animate.css）配合使用：
<transition
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<div v-if="show">内容</div>
</transition>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) {
// 进入前状态
},
enter(el, done) {
// 进入动画
done() // 调用表示动画完成
}
// 其他钩子方法...
}列表过渡
使用 <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);
}过渡模式
设置过渡模式控制进入和离开的顺序：
<transition name="fade" mode="out-in">
<button v-if="show" key="save">保存</button>
<button v-else key="edit">编辑</button>
</transition>常见过渡效果实现
淡入淡出效果
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}滑动效果
.slide-enter-active {
transition: all 0.3s ease-out;
}
.slide-leave-active {
transition: all 0.3s ease-in;
}
.slide-enter {
transform: translateX(100%);
}
.slide-leave-to {
transform: translateX(-100%);
}缩放效果
.scale-enter-active, .scale-leave-active {
transition: all 0.3s;
}
.scale-enter, .scale-leave-to {
transform: scale(0);
}注意事项
- 为列表项设置唯一的
key属性 - 过渡性能优化：避免使用会影响布局的属性（如
height） - 复杂的动画建议使用 CSS transform 和 opacity 属性
- 对于初始渲染的过渡，可以使用
appear属性
Vue 的过渡系统可以与多种 CSS 动画库集成，如 Animate.css、GSAP 等，实现更丰富的动画效果。
