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 のその他のコンテンツにも注目していただければ幸いです。