Vue3 Transition组件给页面切换加动画效果
warning:
这篇文章距离上次修改已过236天，其中的内容可能已经有所变动。
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">Hello World!</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
}
}
</script>
<style>
/* Define fade enter and leave active states */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>这个例子中，我们定义了一个简单的Vue 3组件，其中包含一个可以开关的段落和一个transition组件。通过点击按钮来切换段落的显示与隐藏，这个过程中会应用名为"fade"的动画效果。CSS部分定义了进入（enter）和离开（leave）的动画状态。
评论已关闭