Vue のトランジションは、アニメーション トランジションをカプセル化するコンポーネントです。一般的なシナリオでは、トランジション タグでラップされた DOM にアニメーション効果が含まれます。トランジション コンポーネントのアニメーション効果トランジション設定は、CSS の transition プロパティ設定に基づいています。ここでは、プロジェクトにおける Vue のトランジション コンポーネントの適用について紹介します。 単一のポップアップアプリケーション知らせ:
<テンプレート> <div> <button v-on:click="表示 = !表示"> トグル </ボタン> <トランジション名="フェード"> <p v-if="show">こんにちは</p> </トランジション> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ () { 戻る { 表示: 真 } }, } </スクリプト> <style スコープ lang="less"> .フェード-エンター-アクティブ、 .フェードアウトアクティブ{ 遷移: すべて .5 秒; } .フェードアウト{ 不透明度: 0; 変換: translateX(20px); } .フェードエンター{ 不透明度: 0; 変換: translateX(-20px); } </スタイル> コンテンツ切り替え制御効果知らせ:
<テンプレート> <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); } 。位置{ 位置: 絶対; } </スタイル> アニメーションフレームワークでの使用知らせ
<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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: HTMLはフォームタグを使用して登録ページのサンプルコードを実装します。
この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...
序文まずは最終的な効果を見てみましょう。私が自分で作った小さなデモです。まずEChartsの公式サイ...
目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...
目次前面に書かれた環境の展開Zookeeper クラスタの展開Clickhouse クラスターの展開...
序文この記事では、最近私が遭遇した 2 つの状況について説明します。今後、新たな発見があれば追加して...
目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...
*** ハイパーリンクのスタイル設定の例a:link クリックされる前のハイパーリンクの状態a:vi...
最新の HTML 標準には、レイアウトを計算するために使用できる calc CSS 式があります。し...
この記事の例では、ファイルアップロード機能を実現するためのjquery+springbootの具体的...
この記事の例では、グラフィック検証コードを実装するためのVueプロジェクトの具体的なコードを参考まで...
目次繰り返しレンダリングループを避ける副作用の除去についてReact16.8 の新しい useEff...
背景モバイル デバイスでは、ページ ジャンプ間のキャッシュが必須要件です。例: ホームページ =&g...
プロセス アドレス空間の分離は、現代のオペレーティング システムの注目すべき機能です。これは、「古い...
1.1 バイナリインストールパッケージをダウンロードするhttps://dev.mysql.com/...
MySQL は、ユーザーごとに 2 つの異なるバージョンを提供します。 MySQL コミュニティ サ...