javascript - vue 遷移効果 css クラス名の遷移順序

Question

要素のトランジションをデザインする 理想的な効果は、要素が表示されると高さが増加し、消えると高さが減少することです。
設計されたコードは次のとおりです:

リーリー

結果要素が表示されると、高さはすぐに 100px になります。それが消えると、正常です。コードを修正する順序は次のとおりです。 リーリー

問題は解決しました。順序が影響する理由がわかりません。トランジション効果は CSS を切り替えることによって実現されているのではないでしょうか?オーバーレイの問題ではないはずですよね?

クリックすると、特定の効果 jsbin を表示できます

Answer 1

@CRIMXの答えは、基本的に、最初のフレームでenterとenter activeの2つのクラスが同時に存在し、その後、スタイルを削除することでアニメーションが実行されることを明らかにしました。アクティブなクラスの設定を事前に有効にすることはできません。

アニメーションを完成させるには 2 クラスのメソッドで十分ですが、確かに理解しにくいため、vue 2.1.8 ではアニメーションの終了状態をアクティブなクラスから分離できる to というクラス名を追加し始めました。理解しやすくなり、シーケンシャル カバレッジの問題の発生を回避できます。

Answer 2

要素を挿入すると、v-enter と v-enter-active が同時に有効になり、前者は次のフレームで削除され、後者はアニメーションの完了後に削除されます。したがって、v-enter-active を最初に記述する必要があります。休暇についても同様です。

Answer 3

これは本当に奇妙です、次回アクティブに書くときは、それを前に書いて、専門家の説明を待ちます

Answer 4

公式ウェブサイトにある非常に詳しい説明をご覧ください: https://cn.vuejs.org/v2/guide/transitions.html#过渡的-CSS-类名