Vue 的 Transition 组件用于在插入、更新或移除 DOM 元素时应用过渡效果。它为元素或组件的进出过渡提供了一种便捷的方式，支持 CSS 过渡、CSS 动画以及 JavaScript 钩子函数。
基本用法
以下是一个使用 Transition 组件的简单示例：
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">Hello, Vue.js!</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true,
};
},
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0;
}
</style>
解释
<transition>组件：包装需要过渡的元素或组件。name属性：指定过渡的名称，这会生成相应的 CSS 类名。v-if指令：控制元素的显示和隐藏。- CSS 类名：基于
name属性生成的类名，如.fade-enter-active、.fade-leave-active等。
CSS 类名
Transition 组件会自动为不同的过渡状态添加相应的 CSS 类名：
-
进入过渡：
v-enter：进入过渡的开始状态。v-enter-active：进入过渡的活动状态。v-enter-to：进入过渡的结束状态（2.1.8+）。
-
离开过渡：
v-leave：离开过渡的开始状态。v-leave-active：离开过渡的活动状态。v-leave-to：离开过渡的结束状态（2.1.8+）。
JavaScript 钩子
除了 CSS 过渡，Transition 组件还支持 JavaScript 钩子函数：
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
<p v-if="show">Hello, Vue.js!</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true,
};
},
methods: {
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
setTimeout(() => {
el.style.opacity = 1;
done();
}, 1000);
},
leave(el, done) {
setTimeout(() => {
el.style.opacity = 0;
done();
}, 1000);
},
},
};
</script>
解释
@before-enter：进入过渡开始前触发。@enter：进入过渡时触发。@leave：离开过渡时触发。
过渡模式
Transition 组件还支持过渡模式：
- in-out：新元素先进行过渡，旧元素随后进行过渡。
- out-in：旧元素先进行过渡，新元素随后进行过渡。
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<transition name="fade" mode="out-in">
<p v-if="show">Hello, Vue.js!</p>
<p v-else>Goodbye, Vue.js!</p>
</transition>
</div>
</template>
总结
Vue 的 Transition 组件提供了一种简单而强大的方式来为 DOM 元素和组件添加过渡效果。通过结合使用 CSS 类和 JavaScript 钩子函数，你可以创建丰富的动画效果，提升用户体验。
