Day18 动画介绍(2)

前言:
昨天介绍完进入时的渐入效果,今天会继续将剩下的范例介绍完
并在最後会介绍自定义前缀词

范例:
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


<<:  【把玩Azure DevOps】Day20 建立自管的Azure DevOps Agent(Windows VM agent)

>>:  [Day 18] 串接MySQL

App 开发经营管理(ㄧ)

APP 营运思考 了解开发 APP 目的,不要为了做 App 而做 确认开发需求 商业目标 开发成本...

MS Azure ML02

接着,请回到[Microsoft Azure]的Home,在[Recent resources]处&...

[iT铁人赛Day26]练习题(5)

这次要来讲20201222的第五题了 这次的题目比较简单,但是题目叙述很长 大意就是:有一个人很爱喝...

【DAY 6】沟通 0 距离 - Micorsoft Teams 的应用技巧

哈罗 ~ 大家好 ~ 欢迎回来 ~ 昨天提到 Power Automate 的自动化流程以及核准流程...