vue 实现过渡效果
Vue 过渡效果实现方法
Vue 提供了内置的 <transition> 和 <transition-group> 组件，用于在元素或组件插入、更新或移除时应用过渡效果。以下是实现过渡效果的几种常见方法。
使用 <transition> 组件
通过包裹需要过渡的元素或组件，<transition> 组件会在适当的时机添加/移除 CSS 类名，从而触发过渡效果。
<transition name="fade">
<div v-if="show">This will fade in and out</div>
</transition>对应的 CSS 类名规则：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}使用 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">JavaScript Hook Example</div>
</transition>对应的 JavaScript 方法：
methods: {
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
anime({
targets: el,
opacity: 1,
duration: 500,
easing: 'easeInOutQuad',
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 name="fade">
<div>This will fade in on initial render</div>
</transition>过渡模式
使用 mode 属性可以控制进入和离开过渡的时序关系，避免两者同时发生。
<transition name="fade" mode="out-in">
<button :key="isEditing" @click="isEditing = !isEditing">
{{ isEditing ? 'Save' : 'Edit' }}
</button>
</transition>结合第三方动画库
可以轻松集成如 Animate.css 等第三方动画库。
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<div v-if="show">Animate.css Example</div>
</transition>以上方法涵盖了 Vue 过渡效果的主要使用场景，根据具体需求选择合适的方式即可。
