アニメーションVUEの使用

移行VUEは、独自のアニメーションを持っていますが、公式サイトを参照してください。https://cn.vuejs.org/v2/guide/transitions.html

1.transition

<遷移>内部</遷移>タグがラップされ過渡要素または成分

条件：1は、動的成分、Vショー/ V-ならなければなりません

　　　　2.transitionのルートパッケージ組立、

、トランジションにトランジションアニメーション効果を6クラス名を提供しています

アニメーション開始の状態にV-入力してください
入りのV-入力し、アクティブなプロセス
V-入る-するアニメーションの終了状態に入ります
アニメーションプロセスを開始するには、左のV-残します
V-休暇アクティブアニメーションを残すためのプロセス
V-休暇・休職への状態の後

CSS3のトランジションやアニメーションで、クラス名の上に完了します。

ここで、そのような名前=「フェード」としてタグ名命名遷移は、クラス名は、上記フェード入力に置き換えられた場合、

        / * 入场前状态* / 
        .fade -ENTER、.fade-leave- {に
            不透明度： 0 。
        } 
        / * 过渡* / 
        .fade -ENTER活性、.fade-leave- アクティブ{ 
            遷移：不透明度 0 .5s。
        } 
        / * 动画* / 
        .ant -enter- アクティブ{ 
            アニメーション：バウンス - で 0 .5s。
        } 
        .ant -leave- アクティブ{ 
            アニメーション：バウンス - で 0 逆.5s 
        } 
        バウンスを@keyframes - で{
             0％は{ 
                変換：スケール（ 0 ）。
            }
             50％{ 
                変換：スケール（ 1.5 ）。
            }
             100％{ 
                変換：スケール（ 1 ）。
            } 
        }
     </スタイル> 
</ HEAD> 
<BODY> 
    の<divのid = "アプリ"> 
        <ボタンをクリック@ = "トグル">切换</ button>の
        <トランジション名= "フェード"> 
            <divのV-ショー=」世界</ div>こんにちは>」を表示
        <遷移名= "アリ">
            <divのV-ショー= "ショー"> CSS动画</ DIV> 
        </移行> 
    </ div> 
    <スクリプト> のvarアプリ= 新しいヴュー（{ 
            エル： '#app' 、
            データ：機能（）{
                 リターン{ 
                    ショー：真
                } 
            }、
            メソッド：{ 
                トグル（）{ この！.SHOW = この.SHOW 
                } 
            } 
        }） </ SCRIPT> 
</ BODY>

2.transitionGroup遷移リスト

そして、遷移transitionGroup差があれば、複数の遷移で使用することはできません、コンポーネント、必要性のtransitionGroupがあるということです

    <スタイル> 
        .LIST - 項目{ 
            表示：インライン - ブロック。
            余白 - 右：10pxの; 
        } 
        .LIST -ENTER活性、.LIST-leave- アクティブ{ 
            遷移：すべて1。
        } 
        .LIST -ENTER、.LIST-leave- {に
            不透明度： 0 。
            変換：移動Yを（30px）
        }
     </スタイル> 
</ HEAD> 
<BODY> 
    の<divのid = "アプリ"> 
        <ボタン@クリック= "追加"> </ button>の追加 
        <ボタン@ "削除"をクリック=>削除<
        <遷移グループ名= "リスト" 
            <スパンV- ため = "項目の項目"：キー= "項目"クラス= "リスト項目"> 
                {{アイテム}}
             </スパン> 
        < /遷移群> 
    </ div>   
    <スクリプト> VARのアプリ= 新しいヴュー（{ 
            EL： "#app" 、
            データ：関数（）{
                 リターン{ 
                    アイテム：[ 1,2,3,4,5,6,7 、8,9 ]、
                    nextNum： 10 
                } 
            }、
            方法：{ 
                randomIndex（）{
        
                    リターン Math.floor（Math.random（）*この.items.length）
                }、
                追加（）{ 
                    この .items.splice（この .randomIndex（）、0、この .nextNum ++ ）
                }、
                削除（）{ 
                    この .items.splice（この .randomIndex（）、1 ）
                } 
            } 
        }）
     </ SCRIPT> 
</ BODY>

3.jsフック関数

トランジションでJavascriptのフックは、JSアニメーションを実現使用してプロパティを宣言してもよいです

アニメーションの開始前に、{}（EL）の前に入力し、初期状態を設定します
（EL、行わ）{}アニメーションを入力
入力-後アニメーションの（EL）{}終わり、クリーンアップ
入力キャンセル（EL）{}ムービーをキャンセル
前脱退（EL）{}
休暇（EL、行わ）{}
後脱退（EL）{}
リーブ・キャンセル（EL）{}

ここで、ELは端を行わアセンブリの下の遷移は、遷移が完了表す、コールバック関数を表しています。ショーケース下記完了の効果。

  <スタイル> 
    .fade -ENTER活性、.fade-leave- アクティブ{ 
      遷移：不透明度 0 .5s。
    }
   </スタイル> 
</ HEAD> 

<BODY> 
  の<divのid = "アプリ"> 
    トグル</ button>の<ボタンをクリック@ = "トグル"> 
    <遷移名= "フェード"  
      @Before -ENTER = "beforeEnter" 
      @入力 = "入力してください" 
      @Before -leave = "beforeLeave" 
      @leave = "休暇"> 
      <divのV-ショー= "ショー"> 
        こんにちは、世界！
      </ DIV> 
    </移行>
    VUE（{ 
      EL： '#app' 、
      データ：機能（）{
         リターン{ 
          表示：trueに
        } 
      }、
      メソッド：{ 
        トグル（）{ 
          この = .SHOW！この.SHOW; 
        }、
        // 、初期状態のアニメーションに入る前に
        beforeEnter（EL）{ 
          el.style.opacity = 0 ; 
        } 
        // アニメーション状態の終わりに
        （DONE、EL）を入力し、{ 
          el.style.opacity = 1 ;
           // アニメーションイベントのリスニング終わり、終わりのイベントリスナが存在しない場合、実行DONE上記の表示が適切に隠されていますが、常に位置のdivモジュールを占めます
          el.addEventListener（ 'transitionend' 、DONE）
        } 
        // 状態離れる前
        beforeLeave（EL）{ 
          el.style.opacity = 1。; 
        } 
        // 状態を出た後
        脱退（EL、DONE）{ 
          el.style.opacity =を0 ; 
          el.addEventListener（ 'transitionend' 、DONE）
        } 
      } 
    }）

   </ SCRIPT> 
</ BODY>

4. animate.cssアニメーションの導入

最後のアニメーションは、直接animate.cssを導入することにより、アニメーション効果を達成することは比較的簡単です

入力したアクティブクラス：アニメーションプロセスへのアニメーション
- アクティブクラスを残す：アニメーションは、アニメーション処理を残します

animate.css公式サイト： http://www.jq22.com/yanshi819

    <！ -引入CSS动画库- > 
    <リンクのhref = "https://cdn.jsdelivr.net/npm/[email protected]"のrel = "スタイルシート"タイプ= "テキスト/ cssの"> 
< / HEAD> 
<BODY> 
    の<divのid = "アプリ"> 
        <ボタンをクリック@ = "トグル">トグル</ button>の
        <トランジション入力し、アクティブ・クラス= "アニメーションbounceInLeft" 
            のまま -activeクラス= "アニメーションbounceOutLeft" > 
            <divのV-ショー= "ショー"> hellow世界</ DIV> 
        </移行> 
    </ div> 
    <スクリプト> のvarアプリ= 新しいヴュー（{ 
            エル： '#app' 、
            データ（）{ リターン{ 
                    ショー：偽
        
                
                } 
            }、
            メソッド：{ 
                トグル（）{ 
                    この .SHOW =！この.SHOW 
                } 
            } 
        }）
     </ SCRIPT> 
</ BODY>

1.transition

2.transitionGroup遷移リスト

3.jsフック関数

4. animate.cssアニメーションの導入

おすすめ