<template>
<div >
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
</div>
</template>
<script>
//import Vue from 'vue'
export default{
components: {
},
data() {
return {
show: true,
}
},
}
</script>
<style >
.fade-enter-active, .fade-leave-active {
transition: opacity 3.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
Vue官方文档(26):使用transition组件实现过渡效果
最新推荐文章于 2024-04-06 19:57:59 发布