<vue>文字が切り替わる時にscaleアニメーションをつける

Vue.jsを使ったアプリケーションで、文字が切り替わる際にスケールアニメーションを実装する方法を紹介します。
この機能は、ユーザーの注目を引き付ける効果的なUIデザイン要素となります。Vueのコンポーネントを使用して、慣性を意識したスケールアニメーションを実現する方法を説明し、CSSでアニメーションをカスタマイズする手順を解説します。
by gpt

こんなの

切り替わる時に勢い余って大きくなるそして普通の大きさになる。気持ち良くない？

code

playground

ポイント

1. keyを入れることと
   • 変化を検知させるため
2. leave-activeでopacityを0にすること
   • 前の値が残ってちらつくため

vue

 <transition name='scale'>
	  <h1 :key="count">{{ count }}</h1>
  </transition>

css

.scale-enter-active {
  animation: scaleIn 0.5s;
}
.scale-leave-active {
  opacity: 0;
}
.scale-enter-from {
  opacity: 0;
}

.scale-enter-to {
  opacity: 1;
}

@keyframes scaleIn {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}