以下是一个简单的例子，演示了如何使用状态过渡：
<template>
<div>
<button @click="toggleState">切换状态</button>
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<p v-if="state === 'visible'">这是一个状态过渡效果</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
state: 'visible'
};
},
methods: {
toggleState() {
this.state = this.state === 'visible' ? 'hidden' : 'visible';
},
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> 元素，通过 v-if 来切换组件的状态。在不同状态下，Vue 会根据过渡的不同阶段调用相应的事件钩子来定义过渡效果。
- @before-enter 钩子：在进入过渡之前触发，可以在这里进行一些初始化设置。
- @enter 钩子：在进入过渡中触发，用于定义进入过渡的动画效果。
- @leave 钩子：在离开过渡中触发，用于定义离开过渡的动画效果。
通过切换组件的状态，你可以实现在不同状态下的平滑过渡效果。根据实际需求，你可以调整过渡效果的具体细节。
转载请注明出处：http://www.zyzy.cn/article/detail/505/Vue 3.0