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はフォームタグを使用して登録ページのサンプルコードを実装します。

推薦する

カルーセル効果を書くためのjs

この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...

WeChatミニプログラムの基本チュートリアル:Echartの使用

序文まずは最終的な効果を見てみましょう。私が自分で作った小さなデモです。まずEChartsの公式サイ...

フロントエンドJavaScript ES6の詳細について

目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...

Clickhouse Docker クラスターの展開と構成を例を使って説明します

目次前面に書かれた環境の展開Zookeeper クラスタの展開Clickhouse クラスターの展開...

Dockerコンテナのディスクがいっぱいになった場合の状況のまとめ

序文この記事では、最近私が遭遇した 2 つの状況について説明します。今後、新たな発見があれば追加して...

Docker 経由で CentOS コンテナを作成する手順

目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...

HTML の基本 - ハイパーリンク スタイルを設定する簡単な例

*** ハイパーリンクのスタイル設定の例a:link クリックされる前のハイパーリンクの状態a:vi...

HTML 左、中央、右の適応レイアウト (calc css 式を使用)

最新の HTML 標準には、レイアウトを計算するために使用できる calc CSS 式があります。し...

jquery+springbootでファイルアップロード機能を実現

この記事の例では、ファイルアップロード機能を実現するためのjquery+springbootの具体的...

Vueプロジェクトがグラフィック検証コードを実装

この記事の例では、グラフィック検証コードを実装するためのVueプロジェクトの具体的なコードを参考まで...

React useEffect の理解と使用

目次繰り返しレンダリングループを避ける副作用の除去についてReact16.8 の新しい useEff...

Vue モバイル プロジェクトでページ キャッシュを実装する方法のサンプル コード

背景モバイル デバイスでは、ページ ジャンプ間のキャッシュが必須要件です。例: ホームページ =&g...

Linuxカーネルがプロセスアドレス空間に侵入し、プロセスメモリを変更する方法

プロセス アドレス空間の分離は、現代のオペレーティング システムの注目すべき機能です。これは、「古い...

Linux での MySQL 5.6 バイナリのインストール プロセス

1.1 バイナリインストールパッケージをダウンロードするhttps://dev.mysql.com/...

Windows での MySQL 5.7.10 のインストールと設定のチュートリアル

MySQL は、ユーザーごとに 2 つの異なるバージョンを提供します。 MySQL コミュニティ サ...