想做點花哨的動畫嗎，讓你的介面更加活靈活現。本文將帶大家瞭解vue中負責新增動畫的<transition>元件以及專業的動畫庫Animate.css。
transition元件
舉個例子：
這是一個小列車：
如果我給它加上這樣的css，在讓它出現和消失的動畫會是怎麼樣的呢？
首先，我們給小列車新增v-if：
新增一個按鈕附上點選事件：
定義點選事件：
效果
從右邊慢慢從透明顯示到中間：
從中間慢慢消失在左邊：
各屬性的含義
基礎屬性：
opacity：透明度，0則透明，1則完全顯現。
transform：變換，如用的是translateX(600px)就是從右邊600px開始，translateX(-600px)則從左邊600px開始，還有translateY即上下。
transition：變換時間，這個過程花費的時間。
狀態屬性：
.name-enter-from：顯現的初始狀態
.name-enter-active：顯現的過程
.name-enter-to：顯現的最後狀態（儘管這裏寫透明度為多少，最後都會變成1的透明度）
.name-enter-from：消失的初始狀態
.name-enter-active：消失的過程
.name-enter-to：消失的結束狀態（儘管這裏寫透明度為多少，最後都會變成0的透明度，也就是完全消失）
拓展
變大變小
scale3d用於三維縮放，scale用於二維縮放。
transform還有許多其他的屬性：
rotate()
用於旋轉元素。
rotate()可以按照指定的角度旋轉元素，rotateX(),rotateY(), 和rotateZ()分別在x軸、y軸和z軸上旋轉元素。示例：
transform: rotate(45deg);或transform: rotateX(90deg);skew()
用於傾斜元素。
skewX()和skewY()分別在x軸和y軸上傾斜元素。示例：
transform: skewX(20deg);matrix() 和 matrix3d()
這些函式允許你透過矩陣來應用更復雜的轉換。
matrix()是一個二維的變換，而matrix3d()是一個三維的變換。perspective()
不是一個變換函式，但它用於定義元素的透視距離，影響3D變換的效果。
perspective可以作為一個獨立的屬性，也可以作為變換的一部分。示例：
transform: perspective(1000px);origin 屬性
雖然不是
transform的一部分，但是transform-origin屬性可以設定變換的參考點，即元素的哪個部分是變換的中心。示例：
transform-origin: 50% 50%;
animation
關鍵幀（@keyframes）: 關鍵幀使用
@keyframes規則定義，用於設定動畫中的不同狀態。它們描述了動畫從開始到結束的各個階段。例如，你可以定義動畫的開始狀態、中間狀態和結束狀態：
想必大家看到這個拳頭的emoji就知道效果是怎樣的了，就是一個拳頭在不停地錘螢幕前的你。
基礎屬性：
animation-duration: 一次動畫的時間。animation-iteration-count: 動畫執行的次數，上面的infinite意為無終止的，即反覆執行動畫。animation-delay: 設定動畫開始前的延遲時間。animation-direction: 控制動畫是否反向播放。animation-fill-mode: 設定動畫開始前或結束後元素的樣式。animation-play-state: 控制動畫是否暫停或執行。
Animate.css(專業的動畫庫)
裡面包含了各種動畫，只有你想不到，沒有它做不到。
使用示例：
注意：外面還是要套一層transition，再加上動畫庫中配好的類名。
結語
動畫效果不僅可以讓介面看得更加流暢舒服，還可以在使用網頁的各種操作時得心應手，大幅提升使用者體驗，所以身為一個前端er，會製作動畫是一個很大的加分項。
