需求:對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;
狀態改變錯開
完成!👏👏👏