CSS过渡 淡入淡出
<pre><code class="language-javascript">&lt;template&gt;
&lt;input type=&quot;button&quot; value=&quot;toggle&quot; @click=&quot;flag = !flag&quot; /&gt;
&lt;transition name=&quot;fade&quot;&gt;
&lt;h3 v-show=&quot;flag&quot;&gt;Andy&lt;/h3&gt;
&lt;/transition&gt;
&lt;/template&gt;
&lt;script setup&gt;
import { ref } from &quot;vue&quot;;
import childCompontent from &quot;./components/child.vue&quot;;
let flag = ref(true);
&lt;/script&gt;
&lt;style lang=&quot;less&quot;&gt;
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active{
transition: opacity 1s; //淡入1s
}
.fade-leave-active {
transition: opacity 4s; //淡出4s
}
&lt;/style&gt;</code></pre>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=9b6294b474016a24e3215b6dfb45769c" alt="" /></p>