iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0

Transition 漸變

Vue 有封裝好的 transition 元件可以使用,可以讓我們在撰寫漸變特效時更方便,而且我們可以自定義漸變的樣式類別,設計出屬於自己的特效,這麼好用的元件該怎麼使用呢?來看看下面的範例:

<div id="app">
  <button @click="isShow = !isShow">Toggle</button>
  <transition name="fade">
    <h2 v-if="!isShow">Hello Vue</h2>
  </transition>
</div>
new Vue({
  el: '#app',
  data: {
      isShow: false
  }
})
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}

此為官方文件中的範例,我來說明一下,我們可以使用封裝好的 transition 的元件來使用漸變的效果,上面的元件我有給定一個 name 的屬性,如果沒有給定的話也是可以使用的,再來先說明一下漸變的特效要如何發生,在下列四種情況下,元件在進入及離開的時候可以添加漸變特效:

  • 條件渲染(v-if)
  • 條件顯示(v-show)
  • 動態元件
  • 元件的根節點

而產生特效的方式,是利用不同時間點加入不同的 className 來達到漸變的效果的,下方是各時間點的說明:

  • v-enter:元件插入時生效,並在下一幀移除,進入漸變的開始狀態。
  • v-enter-active:定義進入漸變時的狀態。在元素被插入之前生效,並在漸變完成後移除。可以在此定義 duration、delay、easing curve 等。
  • v-enter-to:定義進入漸變的結束狀態,進入漸變被觸發後下一幀生效並同時移除 v-enter,漸變完成後移除。( 2.1.8版本以上 )
  • v-leave:元件離開時生效,並在下一幀移除,離開漸變的開始狀態。
  • v-leave-active:定義離開漸變時的狀態。在元素被離開之前生效,並在漸變完成後移除。可以在此定義 duration、delay、easing curve 等。
  • v-leave-to:定義離開漸變的結束狀態,離開漸變被觸發後下一幀生效並同時移除 v-leave ,漸變完成後移除。( 2.1.8版本以上 )

https://ithelp.ithome.com.tw/upload/images/20181018/20111589YsodacaGrQ.png

自定義前綴詞

如果我們有給 transition 一個 name 的屬性的話,在設定 CSS 時的前綴詞就會是 name 裡的值,以上面的範例來說的話就是「fade」,如果沒有要自定義前綴詞,也就是沒有設定 name 的屬性的話,前綴詞就預設是「v-」。

經過講解後,是不是就看得懂上面的範例了呢?趕快來試試看,設計出自己的漸變特效吧!

那麼,明天再見囉!


上一篇
Day 18 : Vue extend
下一篇
Day 20 : Vue-cli 建立開發環境與新增專案
系列文
Vue 學習筆記 - 讓你30天掌握 Vue31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言