vue 实现淡入淡出
淡入淡出效果实现方法
使用Vue过渡系统
Vue内置了过渡系统，通过<transition>组件和CSS类名实现淡入淡出效果。在模板中添加<transition>包裹目标元素，并设置name属性为自定义过渡名称（如fade）。
<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;
}自定义过渡类名
可通过enter-class等属性覆盖默认类名，与第三方动画库（如Animate.css）结合使用：
<transition
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<div v-if="show">内容</div>
</transition>JavaScript钩子实现
通过<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) {
let opacity = 0
const interval = setInterval(() => {
opacity += 0.1
el.style.opacity = opacity
if (opacity >= 1) {
clearInterval(interval)
done()
}
}, 50)
}
}列表过渡
对v-for渲染的列表使用<transition-group>实现逐个淡入淡出：
<transition-group name="fade-list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>.fade-list-enter-active, .fade-list-leave-active {
transition: all 0.5s;
}
.fade-list-enter, .fade-list-leave-to {
opacity: 0;
transform: translateY(20px);
}动态过渡
通过绑定属性实现动态过渡效果：
<transition :name="transitionName">
<div v-if="show">内容</div>
</transition>data() {
return {
transitionName: 'fade'
}
}
