vueイベントトリガCSS 3アニメーション

CSS 3アニメーションは軽量レベルの遷移効果を容易に達成できるが、制御の柔軟性に欠けているため、イベントによってCSS 3アニメーションをトリガするvueの方法を記録する.
大体の原理はアニメーションのclassスタイルを追加し、アニメーションが完了した後にこのスタイルを削除し、イベントがトリガーされたときにこのスタイルを追加することです.
コード:
1、まずアニメーションスタイルAnimを設定する

.Anim{
  animation: showMsg 0.6s;
}

@keyframes showMsg
{
  from {opacity: 0;}
  to {opacity: 1}
}

2、アニメーション効果をトリガするためのフラグビットを設定する

export default {
    name: 'anmiTest',
    data () {
      return {
        inAnimation:true
      }
    }
}

3、template内でアニメーションスタイルをバインドし、アニメーション終了後にフラグ位置falseを設定する

4、アニメーションをトリガするイベントでフラグ位置trueを設定すればよい

changeMsg(){
  this.inAnimation=true;
}