// 单元素、单组件 出场 入场 动画
// 入场：从隐藏态到显示
// 出场：从显示态到隐藏
<style>/*过渡 动画的封装*//* 入场*//*开始*/.v-enter-from {opacity: 0;}/*整个过程怎么执行*/.v-enter-active {transition: opacity 3s ease-out;}/*结束*/.v-enter-to {opacity: 1;}/* 出场*/.v-leave-from {opacity: 1;}/*整个过程怎么执行*/.v-leave-active {transition: opacity 3s ease-in;}.v-leave-to {opacity: 0;}</style>
<body><div id="root"></div>
</body>
<script>// 单元素 单组件 出场 入场 动画
// 入场：从隐藏态到显示
// 出场：从显示态到隐藏// 创建 vue实例const app = Vue.createApp({data() {return {show: false}},methods:{handleClick() {this.show = !this.show}},template: `<div><transition><div v-if="show">hello world!</div></transition><button @click="handleClick">切换</button></div>`});const vm = app.mount('#root');</script>
、@Accessors(chain = true)的作用)
