前提 この記事は極力VueのAPIとCSSだけでTransitionアニメーションを実装するという趣旨の元執筆しています。 またtransitionプロパティとVueある程度知っていると仮定した上で話を進めていきます。 よく知らないという方はこちらを閲覧してから、この記事を閲覧することをオススメします。 注意 この記事はデモにCodePenを使用していますが、transitionに必要なCSSを判別しやすくするため、transition関連のスタイルはCSSの欄に、それ以外のスタイルはHTMLの<style>タグに書いています。 あまり褒められたやり方ではないので、本番環境では真似しないでください まず初めに Vueではv-ifかv-showに真偽値を入れてやることで、要素の表示と非表示を切り替えることができます。 しかし、その要素にCSSでtransitionプロパティを設定してやっても