まずは例を見てみましょう コードは次のとおりです <テンプレート> <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内の他の関連記事もぜひご注目ください! 以下もご興味があるかもしれません:
|
>>: WeChatアプレットのスクロールビューの改行問題を解決する
ポートが占有されているかどうかは、これまで一度もわかりませんでした。多くの人に尋ねて、ようやくわかり...
この記事では主に、echart を使用してパーセンテージを表示する Vue の円グラフデータ部分を紹...
Server-Uソフトウェアの紹介Server-U は非常に強力なファイル マネージャーです。FTP...
この文書はMySQL Server 8.0.3のインストールと設定方法を参考のために記録したものです...
必要な環境をインストールする1. gccのインストールnginx をインストールするには、公式サイト...
目次v-model 入力で双方向バインディングデータを使用するコンポーネント内の v-model他の...
導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...
背景最近、複数のプロジェクトを展開する際に、1 つのドメイン名で複数のプロジェクトにアクセスする方法...
1. インストールパッケージをダウンロードする- お使いのコンピュータシステムに応じて適切なバージョ...
フォームのフロントエンド レイアウトでは、テキスト ボックスのプロンプト テキストを両端に揃える必要...
1994 年に設立された組織である W3C は、共通プロトコルの開発を促進し、それらの相互運用性を確...
ある読者から連絡があり、ダウンロードが終了し、操作がまだ開始されていないのに、なぜ Tomcat の...
導入現在、k8s は非常に人気があり、それについて学ぶために本を購入しました。しかし、k8s では数...
タイトルの通り、高さは既知で、左と右の列の幅は 300 ピクセル、中央は適応型です。弾性ボックス自体...
プロジェクトでは、プロジェクトが呼び出すカスタム パブリック コンポーネントに遭遇します。通常、pr...