以下是一个简单的例子，演示了如何使用进入过渡和离开过渡：
<template>
<div>
<button @click="toggleShow">切换显示状态</button>
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<p v-if="show">这是一个过渡效果</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
};
},
methods: {
toggleShow() {
this.show = !this.show;
},
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
el.offsetHeight; // 强制重绘
el.style.transition = "opacity 0.5s";
el.style.opacity = 1;
done();
},
leave(el, done) {
el.style.transition = "opacity 0.5s";
el.style.opacity = 0;
done();
}
}
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
在这个例子中，<transition> 元素包裹了一个 <p> 元素，通过 @before-enter、@enter、@leave 事件监听不同阶段，定义了进入和离开的过渡效果。
- @before-enter 钩子：在进入过渡之前触发，可以在这里进行一些初始化设置。
- @enter 钩子：在进入过渡中触发，用于定义进入过渡的动画效果。
- @leave 钩子：在离开过渡中触发，用于定义离开过渡的动画效果。
需要注意的是，Vue 3.0 中的 @before-enter 替代了 Vue 2.x 中的 before-enter，其他钩子也有相应的变化。在实际开发中，你可以根据具体的过渡需求来使用相应的事件钩子。
转载请注明出处：http://www.zyzy.cn/article/detail/503/Vue 3.0