Vueのトランジションとアニメーションの深い理解

Vueのトランジションとアニメーションの深い理解

1. DOM要素を挿入、更新、または削除するときに、適切な場合は要素にスタイルクラス名を追加します。

2.要素には、エントリ プロセス: Enter と退出プロセス: Leave があります。

どちらのプロセスにも、初期状態 () と終了状態 (-to)、および 2 つの状態間の遷移効果 (activate) があります。

3.ライティング

アニメーション: v-enter-active(替換come這個名字)和v-leave-active(替換go)(這兩個是vue的工作)動畫atguigu(這個是css3的效果) 。アニメーション要素を <transition> で囲むだけです。表示されるのは、要素が読み込まれたらv-enter-activateを実行することです。

遷移:ここでの開始点と終了点は Vue の役割です。

または

<スタイルスコープ>
/* .todo-enter-active{
    アニメーション: myAnamite 1s;
}
.todo-leave-active{
    アニメーション: myAnamite 1秒リバース;
}
@keyframes myAnamite {
    から{
        変換: translateX(-100%);
    }
    に{
        変換: translateX(0);
    }
} */
.todo-enter、.todo-leave-to{
    変換: translateX(-100%);
}
.todo-leave、.todo-enter-to{
    変換: translateX(0);
}
.todo-enter-active、.todo-leave-active {
    遷移: 1 秒線形;
}
</スタイル>

複数の要素のオーバーロード:

サードパーティのアニメーションライブラリ: anamite.css庫

インストール:

インポート: スクリプトにimport 'animate.css'

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明
  • Vue でのトランジションアニメーション効果の適用の詳細な説明
  • Vue 学習ノート 上級章 単一要素遷移
  • Vue 手書き読み込みアニメーション プロジェクト
  • Vueはカルーセルアニメーションを実装します

<<:  CSS3を使用してトランジションとアニメーション効果を実現する

>>:  LinkedIn がウェブサイト閲覧を簡素化するためにリニューアル

推薦する

セマンティックHTML構造を理解する方法

HTML と CSS は誰もが知っていると思います。HTML の構造と CSS の表現の分離も知って...

Reactベースのコンポーネントのカプセル化の実装手順

目次序文antd はどのようにしてコンポーネントをカプセル化するのでしょうか?ディバイダーコンポーネ...

IE8互換表示(IE7モード)とスタンドアロンIE7の違いの詳細な説明

1つ。 IE8 互換表示の概要<br />新しいバージョンのブラウザが古い Web サイ...

HTML+CSSを使用してTG-visionホームページを作成する方法

今回はHTML+CSSレイアウトを使用して、TG-vision Shuanghui Mediaのホー...

Dockerコンテナの紹介

1. 概要1.1 基本概念: Docker は、Go 言語をベースにしたオープンソースのアプリケーシ...

MySQLはカスタム関数を使用して親IDまたは子IDを再帰的に照会します

背景: MySQL では、レベルに制限がある場合、たとえば、ツリーの最大深度を事前に決定できる場合、...

vuexの強制リフレッシュによるデータ損失問題の分析

vuex 永続状態基本原則: すべての vuex データをローカルストレージに保存し、ページが更新さ...

Linuxサーバー間のリアルタイムファイル同期の実現

使用シナリオ既存のサーバー A と B の場合、サーバー A の指定されたディレクトリ (たとえば、...

Baidu 入力メソッドが API を公開、自由に移植して使用できると主張

百度入力方式の担当者は、百度入力方式のオープンAPIの最大の利点は操作が便利であることであり、プラッ...

JSコンストラクタとインスタンス化およびプロトタイプ導入の関係

目次1. コンストラクタとインスタンス化2. コンストラクターとインスタンス化の関係は何ですか? 3...

Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します

目次1. テレポートの使用2. モーダルダイアログコンポーネントを完成させる3. コンポーネントのレ...

Linux に MySql 5.7.21 をインストールするための詳細な手順

序文Linux で最も広く使用されているデータベースは MySQL です。この記事では、Linux ...

mysql8.0.0 winx64.zip 解凍バージョンのインストールと設定のチュートリアル

この記事はmysql8.0.0 winx64.zip解凍版のインストールチュートリアルを記録していま...

JavaScriptはフォームデータの非同期取得を実装します

この記事では、フォームデータの非同期取得を実現するためのJavaScriptの具体的なコードを例とし...

MySQLデータベース監視binlogを有効にする手順

序文多くの場合、ユーザーが自分のデータに対して実行する操作に基づいて何かを行う必要があります。たとえ...