Vue の transition で entering/leaving が非対称なトランジションを実装する - Qiita

Vue には v-if などの条件付き描画を使ってコンポーネントを表示/非表示する際に CSS の transition や animation の動きを付与できる transition ラッパーコンポーネントというものがあります。今回は表示・非表示で非対称な動きをする Vue transition と CSS の実装についてメモします。 時間差でフェードイン、クリック時にフェードアウトするカード 次のようなカードの要素を作ってみます。なおカードの上にあるボタンは動作確認用のものなので、記事の本題とは関係ありません。 See the Pen vue-transition-asynchronously-fade-in/out-1 by hamakou108 (@hamakou108) on CodePen. このカードは Vue インスタンスがマウントされてから3秒後に表示され、クリックする