問題タブ [page-transition]

現在2ページあります。私がやっていることは、ページ遷移を試みていて、以下のプラグインswupを使用していることです。今私の問題は、メニューをクリックしたときにページ遷移が機能しないことです。

/indexとのようなメニュー/aboutをhref に追加しました。私のURLはhttp://localhost:8080/example/index、メニューをクリックすると取得object not foundされ、URLが表示されますhttp://localhost:8080/about

誰でもこの問題で私を助けることができますか?

header.php

インデックス.php

about.php

スタイル.css

main.js

私が使用CSSTransitionしていて、コンポーネントで驚くほど機能します：

CSSTransition次の方法でページを開いたり閉じたりするときに、素敵なトランジションを使用できるかどうか疑問に思っていましたRoute。

私は成功せずにそれを試しました。このような使い方はできないCSSTransitionのでしょうか? 別の同様の解決策はありますか？

画像/テキストをクリックすると、この種のスター ウォーズ ハイパー ジャンプ アニメーションが表示される HTML でページ遷移を作成したいと考えています。これは、画像/テキストをクリックすると、ページがその画像/テキストに向かってズームし、その画像/テキストが別のページに変わることを意味します。これが可能かどうか、またその方法を知っている人はいますか? ずっと前にウェブサイトで見た記憶があると思いますが、残念ながらどこにあったか思い出せません。

私が説明しているアニメーションは、この gif https://giphy.com/gifs/bigblueboo-space-scifi-hyperspace-5xtDarHj0ORdxfWtV6gに似ています。

ありがとうございました。

CSS で使用しているページアウト遷移アニメーションがあります。CSS アニメーションを開始するには、コンテナーのクラスを変更する必要があります。このアニメーションをアクティブにする方法を探しています (コンテナにクラスを追加することにより)。終了するのを待ってから、href のリンクに移動します。これが JSFiddleです。

これを行う方法はありますか？

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

シナリオ:

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

問題：

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

解決策：

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

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

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

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

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

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

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