Vue.jsでのナチュラルUIの作成(遷移)

<遷移>タグ
Vueが提供するテンプレートタグであるため、変換効果をより自然に適用することができます.
ex)

<transition name="fade">
  <div>
    모달창 생성시켜주는 div
  </div>
</transition>

前述したように、テンプレートを作成し、cssは3つのスタイルを提供します.

の一番前のfade部分は変換テンプレートでnameとして指定されます.
1) .fade-enter-from{}//アニメーション開始時
2) .fade-enter-active{}//fromからtoに変更した場合の変更方法を定義します.
3) .fade-入力{}//アニメーション終了時

.fade-enter-from{
  opacity: 0;
}
.fade-enter-active{
  transition: all 1s;
}
.fade-enter-to{
  opacity: 1;
}

このようにすると、モデルウィンドウが初めて作成されたときにのみ、自然効果が閉じられたときに一度に閉じる現象が発生します.トランジションが終わったときにも自然に消えたいなら、上のenterからleaveに変えることができます.
.fade-leave-from{ }
.fade-leave-active{ }
.fade-leave-to{ }