vueを使ったCSSトランジション効果の実装方法

この記事では主に Web フロントエンド Vue の CSS トランジション効果の例を紹介しますので、参考にしてください。

インタラクティブなエクスペリエンスにおけるトランジション効果の重要性は自明の理です。以前は、js または Jquery を使用して要素のクラスを追加または削除し、CSS で定義されたスタイルと組み合わせて、いくつかの JavaScript ライブラリを参照した後、非常に複雑で見事な動的効果を作成できましたが、この方法は依然として煩雑です。 。

vue.js には、要素が DOM に挿入または削除されるときにトランジション効果を自動的に適用できるトランジション システムが組み込まれています。 Vue は適切なタイミングで CSS トランジションまたはアニメーションをトリガーし、トランジション プロセス中にカスタム DOM 操作を実行するための対応する JavaScript フック関数を提供することもできます。

すべてのトランジション効果では、ターゲット要素のトランジション属性を使用する必要があります。

<p v-if="show" transition="my-style">显示</p>

transition の機能は、次の命令と一緒に使用できます:

1.v-if 2.v-show 3.v-for 4. 動的コンポーネント

他の命令やリソースもあります。それらを見つけることができます。自分で 。

完全なコード例は次のとおりです:

<p v-if="show" :transition="expand"></p>  // expand必需事先定义好，expand后面写样式要用（关键）
<transition name="expand"><p v-if="show">显示</p></transition>这样的嵌套也可以

.expand-transition { // 必需写
 transition: all .3s ease; 
 height: 30px; 
 padding: 10px;
 background-color: #eee;
 overflow: hidden;
}

.expand-enter{ //开始进入过渡，元素被插入生效
 transition:opacity .5s;
} 
.fade-leave-active { // 结束状态
 opacity:0;
}

もちろん、開始状態と終了状態があり、実際には開始/終了状態を切り替える 4 つの (CSS クラス) 名前があります。

1.v-enter: エントリ遷移の開始状態を定義し、要素が挿入されたときに有効になり、次のフレームで削除されます

2.v-enter-active: エントリ遷移の終了状態を定義します要素が挿入されたときに有効になります トランジション/アニメーションが完了したときに有効になり、トランジション/アニメーションが完了した後に削除されます

3.v-leave: 離脱トランジションの開始状態を定義し、 Leave トランジションがトリガーされ、次のフレームで削除されます

4.v-leave-active: 定義 Leave トランジションの開始状態は、Leave トランジションがトリガーされたときに有効になり、次のフレームで削除されます。上記の 4 つの状態で、ウィンドウの左側からページが入るなどの CSS トランジション効果を完全に記述することができます。これはクールだと思いませんか。

上記は私があなたのためにまとめたものです。

関連記事:

element-ui を構築する方法 (詳細なチュートリアル)

Angular で ng-alain に基づいて独自の選択コンポーネントを定義するには?

Elementuiでデフォルトのスタイル変更を実装する方法

VueでelementUIを使用してカスタムテーマメソッドを実装する

plotly.js描画ライブラリの使用方法の詳細な解釈チュートリアル（詳細なチュートリアル）

elementuiの方法? のデフォルトのスタイルを変更するには

以上がvueを使ったCSSトランジション効果の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。