摘要

除了 CSS transition，我們也可以使用更强大的 CSS @keyframes 動畫來配合 <Transition> 元件，以實現更複雜、非線性的動畫效果。

定義與說明

用法與 CSS 過渡類似，Vue 同樣會應用那 6 個 class。不同之處在於，我們在 enter-active 和 leave-active class 中，使用的是 CSS animation 屬性，將其連結到一個預先定義好的 @keyframes 規則。

實作範例

一個彈跳進入的動畫。

CSS 動畫示例

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% { transform: scale(0); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

結論

當你需要實現多步驟、更具表現力的動畫（如彈跳、搖擺）時，CSS @keyframes 動畫是比 transition 更合適的選擇。

CSS 動畫 @keyframes animation