Vueのtransitionパッケージコンポーネント

vueバージョン情報:2.5.2
問題は、Vueを使ってウェブサイトを作ったときに触れた小さな部品がアニメーションを表示し、Vueのドキュメントを読んだ後、ネット上の皆さんの経験と結びつけて、少し時間をかけて研究したことに由来しています.
最終的な効果
上の図に示すように、マウスを灰色のブロックに移動すると、ポップアップレイヤが
下から上へ表示されます.
ファスナーカーテン(?).
≪インスタンス｜Instance｜emdw≫
上の図に示す効果コードを実現するには、次のようにします.

  
  
  
  

  


  

      

          
            

                 
            
          
          

            {{content}}
          
      
  

  
    var app = new Vue({
      el: "#app",
      data: {
        flag: false,
        content: "    "
      },
      methods: {
        show: function () {
          this.flag = true;
          this.content = "    ";
        },
        hide: function () {
          this.flag = false;
          this.content = "    ";
        }
      }
    })
  

  

Transitionの使用
以上が各種類の状態/プロセスに対応するクラス名の概略図である.
1.名前のないtransitionコンポーネント

    

    ......
    

2.名前付きtransitionコンポーネント
transitionコンポーネントのname属性がfadeである場合、設定すべきアニメーションクラス名はfade-enter、他のクラス名もそうです.

    

    ......
    

3.カスタム遷移クラス名

    

    ......
    

4.カスタムフック関数

    

    ......
    

methods: {
    enter: function (el) {
        ......
    },
    after: function (el) {
        ......
    },
    ......
}

公式文書の使い方はこれだけではありませんが、ここでは簡単によく使われるものをいくつか挙げています.ソースコードはこちら