喋らせていただきました。Vue.js初心者に向けてTransitionの導入方法から、実際に自ら実践したプロダクトの一部(下記)をご紹介しております。私を含め、これまで(意外と)使ったことの無い人たちが多いような気もするので基礎から。その表示する場面(enter)、表示の消える場面(leave)それぞれについてスタイルを指定することで簡単にTransitionを実現できます。仮にname属性をslide-fadeとした場合、下記いずれも要素が挿入される前にTransitionが発火。個別にスタイルを指定できます。左側のショートカットボタンをクリックしても開始日と終了日を指定することができるコンポーネントとなっています。このモーダルを開く瞬間、閉じる瞬間それぞれにTransitionを導入しています。0;}あと、今回はmode属性を付けました。<div></div></transition>その心は、この属性をout-inに設定することで、現在のTransitionの終了を待って新しいTransitionに遷移するようになるため、設計者含めユーザ目線からも明確で分かり易くなりました。一見すると大変細かい変更となります。付けたんだ、と言われてしまうかもしれません。違う例から、選択のstateをローカルステートとして持たせることを目指した複数選択モーダルについて。左ペインに対象となるリストを予め表示、適当なオブジェクトを選択して右ペインに選択済みのオブジェクトを表示します。いったコンポーネントでもTransitionの活躍する場はありました。適当なオブジェクトをクリックし右ペインに反映される瞬間にTransitionを導入しています。0;}ここで一つも選択していない状態から新たに一つ追加した時に、実装したはずのTransitionを確認することができません。どの選択された状況下においても均一のアニメーションを提供しなければといったことが求められる訳ですが、これ以上スタイルの微調整を続けるには難しそうです。そこでフックを使った調整も可能であることを知ります。}}表示のタイミングを一律ずらすことで解決しました。一部プロダクトに対し盛り込んだ機能ばかりでしたが、意外とTransitionを実用的に使えることが判明しました。今後もユーザエクスペリエンス向上に向け、大いにこのTransitionを活用していきたいと思います。