vue实现过度效果
Vue 过渡效果实现方法
Vue 提供了 <transition> 和 <transition-group> 组件，结合 CSS 或 JavaScript 钩子实现元素进入/离开的动画效果。
基础 CSS 过渡
通过 Vue 的 <transition> 组件包裹目标元素，配合 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;
}自定义过渡类名
可覆盖默认的 v- 前缀类名，与第三方动画库（如 Animate.css）配合使用：
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<div v-if="show">内容</div>
</transition>JavaScript 钩子
通过事件钩子实现更复杂的动画逻辑：
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<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> 实现动态列表项的过渡效果：
<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);
}可复用过渡组件
将过渡逻辑封装为可复用组件：
<template>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<slot></slot>
</transition>
</template>状态过渡
对数值变化应用过渡效果：
watch: {
number(newVal) {
TweenLite.to(this.$data, 0.5, { tweenedNumber: newVal })
}
}
