問題タブ [swup]

こんにちは、HeadPlugin がどのようにアニメーションに影響を与えているかという問題に遭遇し、回避策を決定し、誰かが同じ問題に遭遇した場合に備えて、ここに投稿すると思いました。また、これはすべて誤解されている可能性があり、何かが欠けている可能性があるため、お知らせください。

シナリオ:

サイトのさまざまなページにさまざまなスタイルシートを使用したい場合、HeadPlugin を使用してそれを行うことができます。

問題：

スタイルシートを変更すると、フェード アウト アニメーションは機能しますが、フェード イン アニメーションは機能しません。(注: スタイルシート内の要素が、要素とアニメーションに応じて、フェードイン アニメーション間で遷移する 2 つのページで同じ名前を持つ場合、しばらくの間動作します。)

解決策：

すべてのページ間のすべてのアニメーションを定義する別のスタイルシートを作成し、すべての HTML ページに含めます。次に、個々のページの残りのスタイリング用に、または必要に応じて別のスタイルシートを作成します。このようにして、ページ間で同じ id/class を異なる方法で共有する残りの要素をスタイルすることができます。(欠点: すべてのアニメーションを含むスタイルシートの初期ロード時間ですが、このファイルは遅延ロードする必要があります:D)

別の解決策（私は好きではありません）：

すべてのページのすべての要素 (もちろんインライン CSS を除く) のスタイルを含む 1 つの大きなスタイルシートを作成します。(欠点 1: すべてのアニメーションと他のスタイルを含むスタイルシートの初期読み込み時間。アニメーション CSS と非アニメーション CSS を別々のファイルに分割しない限り、このファイルは遅延読み込みしないでください。その場合、スタイルの初期読み込み時間だけです。ただし、すべての重要なスタイルがインラインで実行されている場合を除き、両方のファイル XD を遅延読み込みできます。) (欠点 2: インライン CSS を使用して違いを定義しない限り、異なるページで同じ ID/クラスを共有する要素を持つことはできません。)

潜在的な解決策？（試していません）：

インライン CSS を使用してアニメーションを定義する O_O, これが可能であるかどうかはわかりませんが、おそらく良い考えではありません。

必要に応じて、問題などを示すいくつかの例を投稿できます。

より良い方法がある場合は、pls が私に知らせてください。