VUE学習（8） - トランジション遷移＆アニメーションアニメーション

 

出発前に入力した後

V-入力してください--- V-入力-に             V-残し-する--- V-まま时间点

    V-入力し-アクティブV-まま  -active 期間を 

 

まず、

<遷移名=「マイ」>     //接頭辞を変更します

.V-入る活性{

transiton：すべての.8sやすさ

}

{.MY-入力

変換：移動X（80px）。

不透明度：0;

}

 

II。

サードパーティ製のanimate.css

<リンク>

入場bounceIn

bounceOutを残します

<遷移  入る活性クラス=「アニメーションbounceIn」> // 一定要写アニメーション   

：持続時間は= "{入力：500を残す：0}" //ミリ秒の持続時間を

 

III。

ハーフアニメーション

<@の前に、入力= "beforeEnter" 遷移>

方法：{

beforeEnter（EL）{ 

   

} 、

enter(el,done)

    offsetHeight//触发刷新

    ...

    done

}

 

四，

v-for :key

<transition-group>