vue過渡和動畫總結
阿新 • • 發佈:2021-11-04
vue官網一共介紹了以下幾種過渡:
1,單元素消失和顯示之間切換的過渡
1)單個節點
2)同一時間渲染多個節點中的一個
3)利用css transition實現過渡
4)利用css animation實現動畫
5)自定義過渡的類名可以使用第三方的庫實現過渡:比如使用animation.css
2,狀態過渡
狀態過渡沒有使用vue內建的transition元件
3,列表過渡
列表過渡使用的是transition-group這個內建元件。transition-group與transition不同在於它會以一個真實元素呈現:預設為一個 span
。你也可以通過tag
attribute 更換為其他元素
1)列表的排序過渡:利用transition-group不僅可以進入和離開動畫,還可以改變定位
2)列表的交錯過渡:利用鉤子函式實現的過渡
4,初始渲染的過渡
初始渲染的過渡是剛渲染時候有過渡,之後就不在有過渡,使用appear標識
5,過渡模式
一個離開過渡的時候另一個開始進入過渡。適合解決同一時間渲染多個節點中的一個。過渡模式無法應用在列表過渡中
我站在山頂看風景!下面是我的家鄉!