Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明

Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明

まずは例を見てみましょう

ここに画像の説明を挿入

コードは次のとおりです

<テンプレート>
  <div align="center" style="margin-top: 100px;">
    <button @click="show= !show" >テスト</button>
    <遷移>
      <div v-if="表示">
        <p>これはテキストです</p>
      </div>
    </トランジション>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'transitionTest',
  データ () {
    戻る {
      表示: 真
    }
  }
}
</スクリプト>
<スタイルスコープ>
    .v-enter-active、.v-leave-active {
    遷移: すべて .5 秒;
    }
    .v-enter {
    変換: translateY(50px);
    不透明度: 0;
    }
    .v-アクティブ状態を解除{
    変換: translateY(50px);
    不透明度: .5;
    }
</スタイル>

div コンポーネントをラップし、ボタンをクリックしてアニメーション効果を実現します。これは通常、v-if、v-show、動的コンポーネント、およびコンポーネント ルート ノードで使用されます。

遷移フック関数

Transition には 6 つのフック関数が用意されており、異なる時間に対応するアニメーション効果を記述できます。以下は、これら6つのフック関数の実行時間です。

1.v-enter: 遷移開始状態に入ります。要素が挿入される前に有効になり、要素が挿入された後の次のフレームで削除されます。

2.v-enter-active: 遷移が有効になるときの状態。このクラスは、エントリ遷移のタイミング、遅延、および曲線関数を定義するために使用できます。

3.v-enter-to: 遷移の終了状態に入ります。要素が挿入されてから 1 フレーム後に有効になり (同時に v-enter が削除され)、トランジション/アニメーションが完了すると削除されます。

4.v-leave: 遷移の開始状態を終了します。終了遷移がトリガーされるとすぐに有効になり、次のフレームで削除されます。

5.v-leave-active: 退出遷移が有効になるときの状態。このクラスは、退出遷移の期間、遅延、曲線関数を定義するために使用できます。

6.v-leave-to: 遷移の終了状態を終了します。離脱トランジションがトリガーされた後の次のフレーム(v-leave が削除されるのと同時に)で有効になり、トランジション/アニメーションが完了すると削除されます。

カスタム遷移クラス名

ページにはトランジション効果が必要な箇所が複数あります。Vue が提供するデフォルトの 6 つのフック関数を使用すると、遷移する箇所すべてでトランジション効果が同じになります。さまざまな状況でさまざまなアニメーション効果を定義する必要がある場合は、各トランジション効果に固有のクラス名を定義する必要があります。解決策は、トランジション タグに name 属性を追加し、name 属性に独自のクラス名プレフィックスを記述することです。たとえば、クラス名を使用する場合は、.my-trans-leave、.my-trans-enter-to のようになります。のように:

    <トランジション名="my-trans" モード="out-in">
       <ルータービュー v-if="!$route.meta.keepAlive"></ルータービュー>
    </トランジション>

スタイル、my-trans は「.my-trans-enter-active」のプレフィックスです

<スタイル>
  .my-trans-enter-active、
  .my-trans-leave-active {
    遷移: すべて .2;
    不透明度: 1;
  }
  .my-trans-enter {
    遷移: すべて .2;
    不透明度: 0;
  }
  .my-trans-leave-to {
    遷移: すべて .2;
    不透明度: 0;
  }  
</スタイル>

遷移グループの使用

リストに対してトランジション レンダリングを実行する場合は、リストを transition-group 要素でラップする必要があります。リスト内のコンテンツをクリックすると、次のアニメーションに従って削除されます。例は次のとおりです。

ここに画像の説明を挿入

<テンプレート>
  <div class="main_css">
    <トランジショングループ名="スライド">
      <li v-for="(item,i) リスト内" :key="item.id" @click="del(i)">
        {{ item.id }} --- {{ item.name }}
      </li>
    </トランジショングループ>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'transitionGroupTest',
  データ () {
    戻る {
      リスト: [{
        id: 1,
        名前: 「煮魚」
      },
      {
        id: 2,
        名前: 「フライドポテト」
      },
      {
        id: 3,
        名前: 「焼きナス」
      }
      ]
    }
  },
  メソッド: {
    デリ) {
      this.list.splice(i, 1)
    }
  }
}
</スクリプト>
<スタイルスコープ>
  .main_css {
    左マージン: 50px;
    上マージン: 50px;
  }
  .slide-enter-active {
    遷移: すべて 0.5 秒線形。
  }
  .slide-leave-active {
    遷移: すべて .1 秒線形。
  }
  .スライド-エンター{
    変換: translateX(-100%);
    不透明度: 0;
  }
  .slide-leave-to {
    変換: translateX(110%);
    不透明度: 0;
  }
</スタイル>

まとめ

トランジションやアニメーションはトランジションタグを使用して完成し、6つのフック関数が用意されています。グローバル アニメーションは app.vue にあり、トランジションは router-view コンポーネントにラップされています。例: ; ローカル変更を実現するには、トランジション タグに name 属性を追加して、トランジション クラス名を定義します。

以上がVueトランジションとアニメーショントランジションの使用例の詳しい説明です。Vueトランジションとアニメーショントランジションについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください!

以下もご興味があるかもしれません:
  • Vue コンポーネントの transition と transition-group を使用してトランジションアニメーションを実装します。
  • Vue の複数の要素、コンポーネント、リストの遷移方法の例
  • Vue での単一ノード遷移と遷移グループリスト遷移の全体的なプロセス

<<:  MySQL ロックブロッキングの詳細な分析

>>:  WeChatアプレットのスクロールビューの改行問題を解決する

推薦する

自己終了XHTMLタグを書くときに注意すべきこと

XHTMLの img タグは、次のように記述する必要があります: <img alt="...

MySQL テーブル削除操作の実装 (delete、truncate、drop の違い)

この記事では主に、MySQL でテーブルを削除する 3 つの操作、つまり delete ステートメン...

VMware Workstation Pro は Win10 ピュア バージョンのオペレーティング システムをインストールします

この記事では、VMware Workstation Pro で Win10 オペレーティング システ...

HTML テーブルタグチュートリアル (12): 境界線スタイル属性 FRAME

FRAME プロパティを使用して、表の境界線のスタイル タイプを制御します。基本的な構文<T...

Vueが初めて要素を取得できなかったときの解決記録

序文Vue で要素を初回取得できない問題の解決方法は、ポップアップ ウィンドウで要素を取得するために...

ウェブページの背景色を制御する CSS コード

誰もが自分の Web ページの背景にふさわしい画像を見つけることに悩むことが多いと思います。これは事...

Divの境界と透明度に関する設定

フレーム:スタイル=”border-style:solid;border-width:5px;bor...

ReactプロジェクトにSCSSを導入する方法

まず依存関係をダウンロードします yarn sass-loader ノード sass を追加します次...

Vue が Ref を使用してレベル間でコンポーネントを取得する手順

VueはRefを使用してレベル間でコンポーネントインスタンスを取得します例の紹介開発プロセスでは、レ...

Portainer を使用して Docker のビジュアル インターフェースを構築する方法

ポーテナーの紹介Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な...

CSS3 で King of Glory マッチング人員読み込みページを実装する方法

King of Glory をプレイしたことがある人なら、このページの効果をよくご存知でしょう。なぜ...

JavaScript にはすでに Object があるのに、なぜ Map が必要なのでしょうか?

目次1. オブジェクトをマップとして扱わない1. 未定義のプロパティはプロトタイプチェーンを通じてア...

docker windows10共有ディレクトリのマウント失敗の解決策

原因docker スクリプトを実行すると、コンテナを作成できないというエラーが発生します。以下のよう...

シンプルな虫眼鏡効果を実現するJavaScript

大きな箱の中に写真があります。マウスをその上に置くと、半透明のマスク レイヤーが表示されます。マウス...

Reactソースコードにおけるビット演算について詳しく説明します

目次序文いくつかの一般的なビット操作ビットAND (&)ビットOR (|)ビット否定(~)マ...