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はフォームタグを使用して登録ページのサンプルコードを実装します。
私たちが作成する Web ページでは、より多くの人々に訪問してもらいたい場合、検索エンジンを使用して...
誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に...
chmod コマンド構文chmod コマンドを使用する場合の正しい構文は次のとおりです。 chmod...
目次導入1. 事例の概要2. 環境の展開3. Nginxホストのインストール4. Tomcatのイン...
以下に、一般的な MySQL コマンドをいくつか示します。 -- データベース サービスを開始します...
1. ダウンロード公式サイトからmysql-5.7.19-linux-glibc2.12-x86_6...
目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...
MySQL テーブルでの接続方法は実は非常に簡単なので、ここではその特徴を簡単にリストします。テーブ...
目次序文: 1. vue-cliでプロジェクトを作成する2. ルーターをインストールする3. ディレ...
生活の中で、インターネットはどこにでもあります。インターネットを通じてゲームをしたり、テレビ番組を見...
目次序文: 1. インデックスメソッドを作成する2. インデックスを作成するために必要な権限序文: ...
XPath は、XML ドキュメントの一部を選択するための言語です。 XPath は、XSLT、XQ...
目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...
目次MySQL インデックス最適化ページングの調査ケース1ケース2 MySQL インデックス最適化ペ...
方法 1: INSERT INTO t1(field1,field2) VALUE(v001,v00...