iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

0
Modern Web

30天Vue出Google SSO系列 第 28

Day 28. F2E-過渡動畫

https://ithelp.ithome.com.tw/upload/images/20201014/20118686HnXofnXcHw.jpg

系列文接近尾聲,專案最後要來做一個過渡動畫效果

我們要做的效果是向左/右滑入滑出,效果可以參考 Vue-過渡模式
gif已死QQ

搭配 Vue Router 做出路由的過渡動畫效果,參考 Vue Router-基於路由的動態過渡

<transition :name="transitionName">
  <router-view></router-view>
</transition>

這篇是我覺得做的最有成就感的,因為平常不會去接觸到任何動畫相關的效果,公司覺得系統能用就好,動畫等於是多的,有就很好沒有也沒差

台灣公司普遍都是這樣的心態~所以CSS才會被列為選配技能...


#過渡類名

Vue 本身有個 transition 組件提供給內部組件加上 進入/離開 的動畫效果,而且非常方便又很好理解

組件 進入/離開 所對應的CSS有6個:

  • v-enter: 組件進入過渡的開始狀態,在元素被插入之前生效,在元素被插入之後的下一幀移除。
  • v-enter-active: 定義進入過渡生效時的狀態。在整個進入過渡的階段中應用,在元素被插入之前生效,在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間,延遲和曲線函數。
  • v-enter-to: 2.1.8版及以上定義進入過渡的結束狀態。在元素被插入之後下一幀生效(與此同時v-enter被移除),在過渡/動畫完成之後移除。
  • v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效,下一幀被移除。
  • v-leave-active: 定義離開過渡生效時的狀態。在整個離開過渡的階段中應用,在離開過渡被觸發時立刻生效,在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間,延遲和曲線函數。
  • v-leave-to: 2.1.8版及以上定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效(與此同時v-leave被刪除),在過渡/動畫完成之後移除。

截自Vue-過渡的類名

簡單來說,就是分為 進入前/中/後離開前/中/後 6個狀態所對應的CSS

官網下方有流程圖說明:

如果 transition 組件沒有賦予 name 屬性,則預設就是抓上面六個CSS。
如果有賦予 name 屬性,例如 name="transitionName",則抓的CSS前綴會變為 transitionName,例如進入前的CSS就是 .transitionName-enter


#自定義類名

接著我們可以根據上面對應的狀態來做自己的過渡CSS
需要做的效果分為四種,以四種效果用到的狀態分別定義類名:

  • 滑入
    • 進入前: slide-left-enter
    • 進入中: slide-left-enter-active
  • 滑出
    • 離開中: slide-left-leave-active
    • 離開後: slide-left-leave-to
  • 滑入
    • 進入前: slide-right-enter
    • 進入中: slide-right-enter-active
  • 滑出
    • 離開中: slide-right-leave-active
    • 離開後: slide-right-leave-to

不會用到 進入後離開前 的狀態,就不定義它們了!!

一個過渡動畫會使用到兩個效果,以官方這個例子來說,就包含了兩個元素,一個向左滑入,另一個向左滑出
gif已死QQ


#向左滑入

我們就先以 向左滑入 開始說明!!

#進入前

向左滑入進入前 ,CSS屬性設定為:

.slide-left-enter {
  opacity: 0;
  transform: translate(100%);
  position: absolute;
}
  • opacity: 元素透明度,值範圍[0.0~1.0],代表完全透明到完全不透明
    參考MDN-opacity
  • transform: 可以修改 CSS 可視化格式模型的空間維度,讓元素可以被平移、旋轉、縮放和傾斜
    參考MDN-transform
    • translate(x,y): 將元素在二維向量上重新定位,x表示向右移動,y表示向下移動
      這裡設定的100%表示元素向右移動了元素本身寬度的100%
  • position: 指定元素的定位方式
    • absolute: 絕對定位
      這裡使用絕對定位讓元素不預留空間

加上這三個CSS屬性讓元素在進入前的狀態為「完全透明」、「在右側100%」

#進入中

進入中的CSS設計為:

.slide-left-enter-active {
  transition: 0.5s;
}
  • transition: 定義元素在兩種狀態切換時的轉場效果,可以一次設定所有,也可以以逗號隔開分別設定
    這裡設定的0.5s表示所有效果都設定0.5秒轉換完畢

在滑入之後,進入前的 slide-left-enter 這個CSS會被移除
也就是說透明度會回到預設1.0,定位也會回到初始值
而透明度從 0 變為 1.0 兩個狀態之間的改變會在0.5秒完成,同理可證定位的狀態改變


#其他效果

其他的效果都是一樣的設計方式,只有左右位移不同
例如 向左滑出 在離開後的CSS就會是:

.slide-left-leave-to {
  opacity: 0;
  transform: translate(-100%);
  position: absolute;
}

代表離開後的位移量會是向右-100%(也就是向左100%)

附上所有效果的CSS:

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: 0.5s;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translate(100%);
  position: absolute;
}
.slide-right-enter,
.slide-left-leave-to {
  opacity: 0;
  transform: translate(-100%);
  position: absolute;
}

#定義transitionName

在包 transition 之前,我們先來定義要使用向左/右滑哪個transitionName
在定義之前就必須先了解它們的意義,以Google的登入過渡效果來說:

  • 向右滑 代表 上一步
  • 向左滑 代表 下一步

那什麼時候應該向左什麼時候該向右呢?
回到我們的頁面流程,基本上有4條路線:

  • 從未登入過
    • [輸入帳號] -> 繼續 -> [輸入密碼]
  • 曾經登入過
    • [選擇帳號] -> 點帳號 -> [輸入密碼]
    • [選擇帳號] -> 使用其他帳戶 -> [輸入帳號] -> 繼續 -> [輸入密碼]
  • 已登入但要登別的帳號
    • [驗證帳號] -> [輸入密碼]

可以看出來每條路線都是往 [輸入密碼] 走,所以輸入密碼就代表著下一步
而過程中有個插曲是 [選擇帳號][輸入帳號],這個也會是下一步

所以我們可以這樣寫,只要前往 [輸入密碼]向左滑,另外從 [選擇帳號][輸入帳號] 也是向左滑,其他都是向右滑

定義的方式寫在 watch $route 監聽路由改變的事件上:

watch: {
  $route: {
    handler: function(to, from) {
      ...
      this.transitionName = "slide-right"; //預設向右滑
      switch (to.name) {
        case "KeyinUser":
          ...
          //如果是選擇帳號到輸入帳號就向左滑
          if (from.name === "ChooseUser") {
            this.transitionName = "slide-left";
          }
          break;
        case "KeyinPswd":
          //輸入密碼都是向左滑
          this.transitionName = "slide-left";
          break;
        ...
      }
    },
    immediate: true,
  },
},
data() {
  return {
    transitionName: "",
  };
},

#包上transition

最後將我們要做過渡動畫的元素也就是 router-viewtransition 包起來吧!!

<transition :name="transitionName">
  <router-view
    ...
  ></router-view>
</transition>

#結果

包好就完成囉~
來看看最後的畫面吧!!

  • 從驗證開始
    gif已死QQ
  • 從選擇帳號開始
    gif已死QQ

今日重點:

  • 使用 Vue-過渡 搭配 Vue Router-過渡動效 實作過渡動畫效果
  • 使用 transition 來包需要過渡動畫的元素
  • 元素包含 進入前/中/後 離開前/中/後 6個狀態及對應的CSS類名
  • transition 可加上 name 屬性搭配自定義類名
  • 使用 watch $route 監聽路由事件來定義要使用的過渡動畫

眼尖的會發現過渡動畫元素已經超出卡片組件了!!
這個問題留到明天吧~

有需要改進或是任何意見建議歡迎下面留言~


上一篇
Day 27. B2E-密碼加密
下一篇
Day 29. F2E-完善過渡動畫
系列文
30天Vue出Google SSO30

尚未有邦友留言

立即登入留言