vue.jsトランジションやアニメーション

Vueの挿入、更新、または削除DOMは、動的に必要なアニメーションを実現するためにCSSクラス名を追加する場合

1.transitionラベル

移行パッケージのラベルに要素、およびname属性の値を設定するには、この値は任意に設定することができますが、彼は自動的に追加するときドム更新をcssクラスに名前を付けることにしました

デモンストレーションとして、ここに名前を付ける=「XXX」

<div id="app">
    <button @click="isShow = !isShow">点我切换显示隐藏</button>
    <transition name="xxx">
        <p v-show="isShow">{{msg}}</p>
    </transition>
</div>

ボタンをクリックすると、表示が隠蔽されるP要素によって切り替えられる（1）、P 2 CSSクラス要素が追加されます。

<p class="xxx-leave-active xxx-leave-to">vue动画效果</p>

p要素は完全に隠された場合、対応するクラスのCSSを削除します

<p class="" style="display: none;">vue动画效果</p>

（2）隠された、P 2 CSSクラス要素が追加された表示するため、再びPスイッチング素子をボタンをクリックしてください。

<p class="xxx-enter-active xxx-enter-to" style="">vue动画效果</p>

p要素が完全に表示されたとき、対応するクラスのCSSを削除

<p class="" style="">vue动画效果</p>

（3）スタイルのXXX-入力し、セットxxxの脱退は、瞬時に効果素子を起動切り替えます。（二つのクラス内のDOM不可視のクラス属性が）口語的に、2つのクラスが初期転移属性値を提供するため、およびXXX-入力-にXXX-放置するように設けられた属性値を終了します計算トランジション効果

（4）V-ショー/効果を有効にするトランジションとアニメーションの終了後に待機することにあるVは、場合

2.属性クラスのCSSを設定します。

前述の説明は、スイッチング素子4が追加されたCSSクラスの例には、設定された特定のプロパティCSSクラスにこれらの必要性は、効果を確認します

<style>
    .xxx-enter-active,.xxx-leave-active{
        /* 设定过渡效果 */
        transition: all 10s;
    }
    /* 显示 */
    .xxx-enter{
        /* 过渡的起始效果 */
        opacity: 0;
    }
    .xxx-enter-to{
        /* 过渡的结束效果 */
        opacity: 1;
    }
    /* 隐藏 */
    .xxx-leave{
        /* 过渡的起始效果 */
        opacity: 1;
    }
    .xxx-leave-to{
        /* 过渡的结束效果 */
        opacity: 0;
    }
</style>

と略称することができます。

<style>
    .xxx-enter-active,.xxx-leave-active{
        /* 设定过渡效果 */
        transition: all 10s;
    }
    .xxx-enter,.xxx-leave-to{
        opacity: 0;
    }
    .xxx-enter-to,.xxx-leave{
        opacity: 1;
    }
</style

PS：一般的なスタイルで遷移元素のクラスの名前を追加するプロセスを表示または非表示、スタイル属性の値は、単にアニメや映画が終了し、スタイルプロパティ値の終わりに入る時間要素の開始時に設定されています

3.アニメーション

（1）登録アニメーション

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

（2）ターゲット要素のための遷移パッケージラベル、およびname属性の値を設定します

<div id="app">
    <button @click="isShow = !isShow">点我切换显示隐藏</button>
    <br>
    <transition name="xxx">
        <!-- 设定成行内块级元素，方便控制元素大小 -->
        <p v-show="isShow" style="display: inline-block">{{msg}}</p>
    </transition>
</div>

（3）は、属性クラスのCSSを設定します

.xxx-enter-to,.xxx-leave-to{
    /* 调用动画 */
    nimation: bounce-in 10s;
}
.xxx-enter,.xxx-leave{
    /* 添加起始效果，适应动画的第一帧 */
    transform: scale(0);
}

4.カスタムクラス名

あなたは、クラス名を定義されている定義されたクラス名VUEを使用しますが、自分自身や第三者を使用したくない場合は、トランジションクラス名タグで次のプロパティを指定することができます
入力し、クラスが
アクティブクラス-入力し
てくださいツークラス（2.1.8+）
休暇クラス
休暇クラスのアクティブ
リーブ・ツー・クラス（2.1.8+）

基本的な使用：

//这里用到第三方的类名
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">

//name属性可以不写
<transition 
name=""
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>

animate.css前cssクラスの多くは、あなたは公式サイトで目的のカテゴリを選択して、アニメーションを表示が、アニメーションの基本的なクラスを追加することを忘れないでくださいすることができます

遷移の複数の要素

内部タグをレンダリングする（1）遷移がそのように使用される複数の要素は、V-IF-表示Vを使用していない切り替えることができる場合には、一つだけ子をした後に
（2）と、同じラベル名のスイッチング素子、私たちは、それがVueのをできるようにマークを区別するために重要な機能を通じて一意の値を設定する必要があります

<transition name="xxx">
    <li v-if="index===0" key="1">
        <h1>第一屏</h1>
    </li>
    <li v-else key="2">
        <h1>第二屏</h1>
    </li>
</transition>

<style>
    .xxx-enter-active,.xxx-leave-active{
        transition: all 10s;
    }
    .xxx-enter{
        transform: translateX(100%);
    }
    .xxx-leave-to{
        transform: translateX(-100%);
    }
</style>

6.移行モードモード

デフォルトでは、上記スイッチング素子2に対して。要素が入り、二つの要素の場合は、表示されるページに表示されながら、同時に要素を残します。その他の効果は、モード属性を変更することであってもよいです。
イン・アウト：離れて現在の要素からの移行が完了した後の移行に新しい要素、。
アウトで新しい要素への移行が完了した後の最初の遷移、の現在の要素。

<transition name="xxx"  mode="out-in">
    <li v-if="index===0" key="1">
        <h1>第一屏</h1>
    </li>
    <li v-else key="2">
        <h1>第二屏</h1>
    </li>
</transition>

デフォルト：

アウトイン：最後で、ファーストアウト

イン・アウト：最後のアウト

7.フック関数

プロパティは、移行タグでJavaScriptのフックに宣言することができます。