Pure CSS でアンカーポイントクリック時のスムーズな切り替え効果を実現_html/css_WEB-ITnose

Pure CSS は、アンカーポイントをクリックしたときのスムーズな切り替え効果を実現します

22.50 注: ちょっと間違っているようです o(╯□╰)o 今は読まないでください
時々、関数を実装したいことがありますが、ページの作成など スクロール バーはありませんが、より多くのものを保持できます。この時点では、コンテナーに overflow: hidden を設定し、アンカー ポイントを使用してクリックしてページを切り替える効果を実現します。表示されるコンテンツを制御します)。ただし、アンカー ポイントを介して指定されたコンテンツにジャンプする場合、トランジション効果がなく、ターゲット ポイントへのジャンプが非常に突然になるという欠点があります。もちろん、JS または jQuery を使用して、必要な動的切り替え効果を実現することもできます。このカテゴリには多数の記事があるため、ここでは詳しく説明しません。

ただし、github の個人ホームページ (ホームページのみ、つまり username.github.io) など、一部の個人ホームページでは、この時点で JS スクリプトの実行が禁止されています。アンカーポイントをクリックしたら、どうすればいいですか？

フロントエンド初心者で申し訳ありませんが、長い間考えましたが、解決策が思いつかなかったので、Baidu と Google に頼りました。

その後、チェック属性を備えたラジオを使用するなど、いくつかの方法を見つけました。この方法については、MOOC にも特別なチュートリアルがあります。

しかし、ラジオを挿入せずに対応する効果を達成することは可能ですか? 答えは「はい」です。

つまり、:target 疑似クラスを使用すると、このセレクターで現在のアクティビティのアンカー ポイントを選択でき、この属性を使用して目的の効果を実現できます。

コードは次のとおりです:

<a href="#tag1">Tag1</a><a href="#tag2">Tag2</a><a href="#tag3">Tag3</a><div id="container">  <div id="tag1"></div>  <div id="tag2"></div>  <div id="tag3"></div></div>

div{  width: 100px;  height: 100px;  border-radius: 50%;}#container{  margin-top: 10px;  outline: 1px solid red;  position: relative;}#tag1,#tag2,#tag3{  transition: all ease-out .2s;  position: absolute;  top:0  left:0;  right:0;  bottom:0;  opacity: 0;  }#tag1{  background: #f66;  opacity: 1;  z-index: 1;}#tag2{  background: orange;}#tag3{  background: gray;}#container>div:target{  z-index: 1000;  opacity: 1;}

デモを見る

上記の例は、絶対位置、Z インデックス、透明度によって達成される動的効果です。まずすべての要素の不透明度を 0 に設定し、次に最初の要素をデフォルトで表示するために、最初の要素の不透明度を 1、z インデックスを 1 に設定します。次にクリックして動的切り替えを実行します。

実際、私が最初に試したのは、#container に overflow: hidden; を設定し、その子要素に height:100%; を設定してから、margin-top を負のパーセンテージ値に設定することでした。ターゲットはやっぱり下から上へ上がる感じか、上から下へ落ちる感じの方が好きです。 。 。ただし、実装プロセス中に小さな問題が発生しました。つまり、Tag2 と Tag3 が相互に切り替わるときに、途中までしか移動せず、overflow: hidden を削除すると、期待どおりの効果が表示されます。問題のあるデモ

その後、解決策を考えました。それは、コンテナを div でラップし、この要素に overflow: hidden を設定し、コンテナのオーバーフローを削除し、高さをその子要素の高さに設定することです。 . これで正常に表示されます。デモはここにあります。

解決策は見つかりましたが、問題のデモの奇妙な動作がよくわかりません。ご存知の方がいらっしゃいましたら、教えてください。ありがとうございます。

参照:
stackoverflow - 純粋な CSS スクロール効果