Transition on v-show components

Nuxt
transition
CSS

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



完成!👏👏👏


© 2021 Hamsterism. All rights reserved github