vue实现过度效果
Vue 过渡效果实现方法
Vue 提供了内置的 <transition> 和 <transition-group> 组件，用于在元素或组件进入/离开 DOM 时应用过渡效果。
基本过渡实现
使用 <transition> 包装需要过渡的元素，并定义 CSS 过渡类名：
<transition name="fade">
<p v-if="show">This will fade in/out</p>
</transition>对应的 CSS 样式：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}自定义过渡类名
可以通过以下属性自定义过渡类名：
<transition
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
>
<p v-if="show">Custom transition classes</p>
</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"
>
<p v-if="show">JavaScript hooks</p>
</transition>对应的 JavaScript 方法：
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> 实现列表项的过渡效果：
<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);
}初始渲染过渡
添加 appear 属性使元素在初始渲染时也有过渡效果：
<transition
appear
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class"
appear-active-class="custom-appear-active-class"
>
<p>Initial render transition</p>
</transition>过渡模式
设置 mode 属性控制进入/离开的时序：
<transition mode="out-in">
<button v-if="isEditing" key="save">Save</button>
<button v-else key="edit">Edit</button>
</transition>动态过渡
通过绑定属性实现动态过渡效果：
<transition :name="transitionName">
<p v-if="show">Dynamic transition</p>
</transition>过渡效果优化建议
- 使用 CSS 硬件加速属性（如
transform和opacity）提升性能 - 对于复杂动画，考虑使用第三方动画库如 Velocity.js 或 GSAP
- 为列表项设置合适的
key属性确保过渡效果正确应用 - 避免同时使用 CSS 和 JavaScript 钩子，以免造成冲突
