アニメーション効果のようなVueトランジションの例

結果を一目で見る

ハート効果

材料: ハートアイコン 2 つ。私のようなアイコン コンポーネントがない場合は、代わりに png 画像を使用します。

<transition :name=" isLike ? 'zoom' : '' " mode="out-in">
    <!-- ハートアイコン-->
    <icon data="@icon/like.svg" color="#FF0000" v-if="isLike" key="like"></icon>
    <icon data="@icon/unlike.svg" color="#333333" v-else key="unlike"></icon>
</トランジション>

ボタンに「いいね！」するとアニメーションが表示され、「いいね！」ボタンをキャンセルするとアニメーションが表示されないため、 transition の name 属性は isLike 変数に応じて変更する必要があります。 isLikeがtrueの場合はズーム アニメーションを表示し、それ以外の場合はアニメーションを表示しません。アニメーション モードはアウトインです。つまり、最初に出て最後に入ることを意味します。元のアイコンは大きいアイコンから小さいアイコンに変わり、新しいアイコンは小さいアイコンから大きいアイコンに変わります。

2 つのスイッチング コンポーネントの名前が同じ場合は、2 つのコンポーネントを区別するために key 属性を追加する必要があることに注意してください。そうしないと、アニメーションが有効になりません。

次にCSSを記述します

/** 進行中のアニメーションのクラス **/
.zoom-enter-active、.zoom-leave-active {
    遷移: すべて 0.15 秒 cubic-bezier(0.42, 0, 0.34, 1.55);
}

/** エントリ開始状態と終了終了状態を設定します。両方とも 0 にスケールされます **/
.zoom-enter、.zoom-leave-to {
    変換: スケール(0);
}

/** エントリ終了ステータスと終了開始ステータスを設定します。どちらも 1 にスケールされます **/
.zoom-enter-to、.zoom-leave {
    変換: スケール(1);
}

公式ドキュメントによると、アニメーション中のアイコンコンポーネントのクラスには .name-enter-active と .name-leave-active が設定されるので、ここでアニメーションのプロパティ、遷移の時間と曲線を設定します。

ズームイン時に画像scale(1)より少し大きくし、その後通常のサイズに戻す必要があるため、アニメーション曲線cubic-bezier(0.42, 0, 0.34, 1.55)カスタマイズする必要があります。この曲線はどのようにして生じたのでしょうか?

Chromeのデバッグパネルを開き、DOMを見つけてtransition-timing-function: easy;を設定し、easeの横にある小さな曲線アイコンをクリックします。

プルバーをドラッグしてカーブを調整します

アニメーションの最後に、曲線を終点を超えて延長するだけです。

次に、曲線パネルの下の値cubic-bezier(0.25, 0.1, 0.27, 1.32)をコピーします。

アニメーションの時間曲線については、インターネット上に関連情報がたくさんあるので、ここでは詳しく説明しません。

ズーム部分に関しては、上記の CSS 設定とmode="out-in"いいねボタンをクリックすると、アニメーション モードは最初にアウトになり、次にインになります。

1. 本来の愛が現場を去り始める。このとき本来の愛のスケールは1で、大きさは100%です。
2. ハートがシーンから消えていきます。ハートのサイズは 1 から 0 (0% のサイズ) まで拡大縮小されます。
3. 元の愛は舞台を去り、新しい愛が舞台に入り始めます。このとき、新しい愛のスケール状態は0です。
4. 新しいハートがシーンに登場します。アニメーションは 0 から始まり、終了状態 1 まで拡大します。
   

いいねをキャンセルすると、 isLikeはfalseなり、遷移の名前は空の文字列になり、アニメーションは行われません。

デジタルスクロールアニメーション

数字の変更だけなので、遷移に必要な div は 1 つだけです。データの変更を示すために、div のキーを設定することに注意します。

<div class="like-num-wrapper">
    <transition :name="item.is_like ? 'plus' : 'minus'">
        <div
                クラス="like-num"
                :style="{color: item['is_like'] ? 'red': '#333'}"
                :key="item['like_num']"
        >
            {{item['like_num']}}
        </div>
    </トランジション>
</div>

  .like-num-wrapper {
    位置: 相対的;
    左マージン: 16px;
    テキスト配置: 終了;
    フォントサイズ: 13px;
    高さ: 17px;
    オーバーフロー-y: 非表示;

    .like-num {
      上: 0;
      左: 0;
      位置: 相対的;
      行の高さ: 17px;
    }
  }

上下のスクロール距離を計算するには、数字の高さを17pxに設定する必要があることに注意してください。次に、遷移アニメーション クラスを記述します。使用するアニメーションを決定するために、いいねのステータスを使用します。いいねがクリックされた場合の遷移の名前はplus 、いいねがキャンセルされた場合の遷移の名前はminus 。

// いいね数 +1 animation.plus-enter-active, .plus-leave-active {
  遷移: すべて .3 秒のイーズイン。
}

.plus-enter、.plus-leave {
  変換: translateY(0);
}

.plus-enter-to、.plus-leave-to {
  変換: translateY(-17px);
}

// 番号 -1 のように animation.minus-enter-active, .minus-leave-active {
  遷移: すべて .3 秒のイーズイン。
}

.マイナスエンター{
  変換: translateY(-34px);
}

.マイナス入力 {
  変換: translateY(-17px);
}

.minus-leave {
  変換: translateY(0);
}

.minus-leave-to {
  変換: translateY(17px);
}

アニメーションのように

いいねアニメーションは非常にシンプルです。いいねボタンをクリックすると、古いデジタル div の下に新しいデジタル div が生成されます。この時点で、すべてを 17 ピクセル上に移動します。

いいねを取り消すと数字が上から下にスクロールするため、数字 1 の初期位置は 2 より上である必要があります。 1番のアニメーションの初期位置を設定するには、次のコードを記述します。

.マイナスエンター{
  変換: translateY(-34px);
}

なぜ -34px なのでしょうか?デジタル div の高さは 17 ピクセルなので、17 ピクセル上に移動すると 2 と重なり、数字 1 がさらに 17 ピクセル上に移動すると 2 の上に表示されます。 -17-17 = 34すべては一瞬のうちに起こった。

次に、 .minus-enter-toで -17px にシフトすることで、1 から 2 にスクロールする効果を実現できます。

2 番の終了アニメーションははるかに単純です。0 から 17 ピクセルまでロールアウトするだけです。

この時点で、全体的な同様の効果が完成します

上記は、Vue トランジションを使用して同様のアニメーション効果を実現する例の詳細です。Vue トランジションを使用して同様の効果を実現する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。