需求：對v-show組件做fade-in和fade-out
在製作Hamsterism About頁面時，兩個介紹組件<about-me>、<about-blog>使用v-show做條件判定展示
v-show本質上是透過添加style="display: none;"實現隱藏組件的需求
關於Vue條件渲染v-if和v-show請直接看官網文件，這裡不贅述Ovo
而display: none;這個CSS設定屬於Boolean，沒有辦法做CSS的transition效果
Vue 3提供了內建的<transition> component，功能強大，可對v-if和v-show使用
舊版的Hamsterism是client-side rendering SPA of Vue 3，<transition>用的很開心
看到Nuxt同樣有<transition>功能，我也就理所當然的用下去...
但是，Nuxt的<transition>和Vue 3的<transition>不一樣！
Nuxt <transition>是針對路徑改變的動畫特效，is for page, not for component!!! (官網說明)
也許可期待之後Nuxt 3出來新增功能吧！
Workaround
寫CSS應該多少都踩過display: none;無法套用transition特效的坑
v-show功能注定使用display: none;，在這個前提下來思考如何讓opacity的0/1變化可以被呈現
我使用的解決辦法如下：
html part
<app-card>
<section
v-show="selectedTag === 'me'"
class="content"
:class="{ active: selectedTag === 'me' }"
@click="selectTag('me')"
>
<AboutMe></AboutMe>
</section>
<section
v-show="selectedTag === 'blog'"
class="content"
:class="{ active: selectedTag === 'blog' }"
@click="selectTag('blog')"
>
<AboutBlog></AboutBlog>
</section>
</app-card>
除了v-show外，條件判定添加.active class
CSS code如下
.content {
opacity: 0;
&.active {
animation: delayOpacity 0.3s linear 0.01s;
animation-fill-mode: both;
}
}
@keyframes delayOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
對的！用animation-delay來解Ovo
延遲時間這裡我設0.01s，總之目的就是與v-show造成的display: none;狀態改變錯開
完成！👏👏👏