トランジションとアニメーションのVueの

トランジションとアニメーションのVueの

遷移の単一の要素を入力＆残し

Vueが新しいとして、あなたが挿入またはDOMを削除すると、トランジション効果をご用意しております

クラスのCSSのトランジションとアニメーション1.自動適用、

2.アニメーションは、animate.cssなどのサードパーティのライブラリを、一緒に使用することができます

直接遷移動作DOMにおける3. JavaScriptのフック関数、

4.は、velocity.jsなどのサードパーティのJavaScriptライブラリ、一緒に使用することができます

トランジション効果

1.単一要素/遷移アセンブリ

1.css遷移

        / * html要素の遷移に対応するフェード名の値は、もう一方は固定されています。* / 
        .Fadeアクティブ入力し、残す-アクティブ.fade { 
        遷移：不透明.5s
         } 
        .fade入力し、残す-アクティブ.fade { 
        不透明度：0
         }

< 本部上記ID言及= "ボックス" > 
        < ボタン@click = "handleClick" >タグpを非表示にする]をクリックし、</ ボタン> 
        <！ - トランジションエフェクトトランジション- > 
        < 遷移名は= "フェード" > 
            < p個のV-ショー=を" isShow " > 111111111 </ P > 
        </ 移行> 
</ DIV >

    VaRの VM = 新しいヴュー（{ 
        エル： '#box' 、
        データ：{ 
            isShow：真、
        }、
        メソッド：{ 
            handleClick（）{ 
                これ！.isShow = この.isShow; 
            }、
        }、
    }）

2.cssアニメーション

3.コンビネーションanimate.cssアニメーションライブラリ

2.初期の移行をレンダリング

//表示され、アクティブクラスの出現

3.遷移元素（キー設定）複数の

同じタグ名のスイッチング素子が複数存在する場合、各スイッチング素子の主要な特性によって一意のタグ値を設定します

モード：イン・アウト、アウトイン

前記遷移の複数のアセンブリ

遷移リスト（設定キー）

異なる遷移族および遷移が、それは本当の要素のレンダリングになり、デフォルトのスパンで、あなたはまた、タグによって他の要素に属性を変更することができます

ユニークキー属性を提供

前記再利用可能な遷移

トランジションとアニメーションのVueの

おすすめ