Vue3——使用v-if或v-show来实现过渡的动画效果
<template>
<div id="app">
<transition name="fade">
<p v-if="show">这是一个可过渡的元素</p>
</transition>
<button @click="show = !show">切换元素</button>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
}
}
</script>
<style>
/* 定义过渡样式 */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>这个例子中，我们定义了一个简单的Vue组件，其中包含一个可以被v-if指令控制显示与隐藏的段落。通过点击按钮来切换show数据属性的布尔值，从而触发过渡。我们还定义了相关的CSS过渡样式，使得元素的显示和隐藏具有平滑的渐变效果。
评论已关闭