Vue プロジェクトにおけるトランジション コンポーネントの適用の概要

Vue プロジェクトにおけるトランジション コンポーネントの適用の概要

​Vue のトランジションは、アニメーション トランジションをカプセル化するコンポーネントです。一般的なシナリオでは、トランジション タグでラップされた DOM にアニメーション効果が含まれます。トランジション コンポーネントのアニメーション効果トランジション設定は、CSS の transition プロパティ設定に基づいています。ここでは、プロジェクトにおける Vue のトランジション コンポーネントの適用について紹介します。

単一のポップアップアプリケーション

知らせ:

  • 名前の部分は、次のスタイルクラスの先頭部分と同じです。
  • アニメーション効果の実行に協力するためにv-ifを使用する
<テンプレート>
  <div>
  <button v-on:click="表示 = !表示">
    トグル
  </ボタン>
  <トランジション名="フェード">
    <p v-if="show">こんにちは</p>
  </トランジション>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ () {
    戻る {
      表示: 真
    }
  },
}
</スクリプト>

<style スコープ lang="less">
.フェード-エンター-アクティブ、
.フェードアウトアクティブ{
  遷移: すべて .5 秒;
}
 .フェードアウト{
  不透明度: 0;
  変換: translateX(20px);
}
.フェードエンター{
  不透明度: 0;
  変換: translateX(-20px);
}
</スタイル>

コンテンツ切り替え制御効果

知らせ:

  1. key: 任意の値を指定でき、アニメーションの切り替えはキー値の切り替えによって制御されます。 コンポーネントは任意であり、変更せずにそのままにしておくことができます。変更するかどうかはあなた次第です。 is を使用したコンポーネント タグを使用することも、v-if を直接使用することもできます。
  2. キーにバインドされたコンポーネントは絶対位置に設定する必要があります。そうしないと、切り替え時に遅延が発生します。 mode="out-in" または mode="in-out" を順に設定することもできます。 それはあなたの個人的なニーズによって異なります。
<テンプレート>
  <div>
    <トランジション名="フェード">
      <button class="position" @click="change" :key="status">
        コンポーネント</button>
    </トランジション>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ () {
    戻る {
      ステータス: '1'、
    }
  },
  メソッド: {
    変化 () {
      if(this.docState === '1'){
        this.docState = '2'
      }それ以外{
        this.docState = '1'
      }
    }
  }
}
</スクリプト>

<style スコープ lang="less">
.フェード-エンター-アクティブ、
.フェードアウトアクティブ{
  遷移: すべて .5 秒;
}
 .フェードアウト{
  不透明度: 0;
  変換: translateX(20px);
}
.フェードエンター{
  不透明度: 0;
  変換: translateX(-20px);
}
。位置{
  位置: 絶対;
}
</スタイル>

アニメーションフレームワークでの使用

知らせ

  • 名前の値は次のように設定する必要があります: custom-classes-transition
  • 表示と非表示のスタイルを制御するための enter-active-class、leave-active-class
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="外部nofollow" rel="スタイルシート" type="text/css">

<div id="example-3">
  <ボタン @click="表示 = !表示">
    レンダリングを切り替える
  </ボタン>
  <遷移
    name="カスタムクラス遷移"
    enter-active-class="animated じゃんけん"
    leave-active-class="アニメーション bounceOutRight"
  >
    <p v-if="show">こんにちは</p>
  </トランジション>
</div>

ページが初めて読み込まれ、アニメーションが実行される

トランジションに表示を追加する

これで、Vue プロジェクトでのトランジション コンポーネントの適用に関するこの記事は終了です。Vue のトランジション コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • トランジションコンポーネントのアニメーション効果を使用した Vue サンプルコード
  • 子コンポーネントでの Vue 遷移の失敗の解決策
  • Vueコンポーネントのキープアライブとトランジションの使用に関する詳細な説明
  • Vue でトランジション カプセル化コンポーネントを実装する方法
  • Vue コンポーネントの transition と transition-group を使用してトランジションアニメーションを実装します。

<<:  MySQLでNULL値を判定する際の落とし穴事例

>>:  HTMLはフォームタグを使用して登録ページのサンプルコードを実装します。

推薦する

HTML における <meta> タグの使用に関する詳細な説明

私たちが作成する Web ページでは、より多くの人々に訪問してもらいたい場合、検索エンジンを使用して...

HTML+CSS+JavaScript でガールフレンド版のスクラッチ カードを作成します (一度見ればすぐに覚えられます)

誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に...

Linux での chmod コマンドの使用方法の詳細な説明

chmod コマンド構文chmod コマンドを使用する場合の正しい構文は次のとおりです。 chmod...

Nginx+Tomcat 負荷分散クラスタの実装例

目次導入1. 事例の概要2. 環境の展開3. Nginxホストのインストール4. Tomcatのイン...

Linux オペレーティング システムでよく使用される MySQL コマンドの概要

以下に、一般的な MySQL コマンドをいくつか示します。 -- データベース サービスを開始します...

Centos7 での Mysql5.7.19 の詳細なインストールチュートリアル

1. ダウンロード公式サイトからmysql-5.7.19-linux-glibc2.12-x86_6...

React Fragment の紹介と詳しい使い方

目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...

MySQLでテーブルを接続するいくつかの方法

MySQL テーブルでの接続方法は実は非常に簡単なので、ここではその特徴を簡単にリストします。テーブ...

vue3.0プロジェクトアーキテクチャを段階的に構築する方法を教えます

目次序文: 1. vue-cliでプロジェクトを作成する2. ルーターをインストールする3. ディレ...

Linux仮想マシンをWiFiに接続する方法

生活の中で、インターネットはどこにでもあります。インターネットを通じてゲームをしたり、テレビ番組を見...

MySQLインデックスの作成について知っておくべきこと

目次序文: 1. インデックスメソッドを作成する2. インデックスを作成するために必要な権限序文: ...

W3C チュートリアル (9): W3C XPath アクティビティ

XPath は、XML ドキュメントの一部を選択するための言語です。 XPath は、XSLT、XQ...

JavaScript の組み込み Date オブジェクトの詳細な説明

目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...

MySQL インデックスの最適化: ページング探索の詳細な紹介

目次MySQL インデックス最適化ページングの調査ケース1ケース2 MySQL インデックス最適化ペ...

SQL 挿入文の書き方の説明

方法 1: INSERT INTO t1(field1,field2) VALUE(v001,v00...