iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
自我挑戰組

新手遇上Vue.js系列 第 18

Day18 動畫介紹(2)

  • 分享至 

  • xImage
  •  

前言:
昨天介紹完進入時的漸入效果,今天會繼續將剩下的範例介紹完
並在最後會介紹自定義前綴詞

範例:
4.v-leave
https://ithelp.ithome.com.tw/upload/images/20211002/20140076zGqYUnoYY0.png
https://ithelp.ithome.com.tw/upload/images/20211002/20140076XJYkqk9iCG.png
https://ithelp.ithome.com.tw/upload/images/20211002/20140076xWO4Eri2c0.png

5.v-leave-active
https://ithelp.ithome.com.tw/upload/images/20211002/20140076NR7rYRphzL.png
https://ithelp.ithome.com.tw/upload/images/20211002/20140076LcCP0JIk0i.png
https://ithelp.ithome.com.tw/upload/images/20211002/20140076eyDkWN8E3m.png

6.v-leave-to
https://ithelp.ithome.com.tw/upload/images/20211002/20140076hFkYXWLWYn.png
https://ithelp.ithome.com.tw/upload/images/20211002/201400769eC6LCTW2g.png
https://ithelp.ithome.com.tw/upload/images/20211002/20140076XvzCQk2eC7.png

自定義前綴詞
自定義的方式有兩種
一.
使用時v-是當沒有元素名稱時的默認值,
但當=”my- transition”就可以將v-enter改成my- transition-enter
二.

  • enter-class
  • enter-active-class
  • enter-to-class
  • leave-class
  • leave-active-class
  • leave-to-class

明天將會介紹CSS的轉換

參考資料: https://vuejs.org/v2/guide/transitions.html#Transition-Classes


上一篇
Day17 動畫介紹
下一篇
Day19 樣式變化(動畫3) CSS轉換
系列文
新手遇上Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言