JSで実現したページサイドバーの効果に関する研究

実際、その効果は次のようになります。

そしてタイトルは、この効果を見たときの私の本当の気持ちなのかもしれません。なぜなら、最初の反応は「ページ全体をページ外に移動することもできるか？」というものだからです。

発見: ディスプレイアニメーションの応用

一体何が原因だったのでしょうか？最近、コミュニティ プロジェクトの公式 Web サイトで次のような効果を作成する計画を立てました。アバターをクリックすると、左/右から「パネル」がスライドして表示され、ユーザーの個人情報が表示されます。

もちろん、位置の位置決め + オーバーフローのオーバーフローによる非表示、不透明度/可視性の非表示 + ポインター イベント要素の貫通の使用など、これを行う方法はたくさんあります... しかし、当時私が考えていたのは、「実際の非表示、表示」にアニメーションを追加する方法でした。

おそらく私たち全員が知っていることですが、HTML レンダリング プロセス中に、「リフロー」と「再描画」のプロセスが実行され、ページのパフォーマンスに影響を及ぼす可能性があります。このプロセスがトリガーされる理由は、要素の位置の移動、サイズの変更、ノードの追加と削除、ここで述べたディスプレイの表示と非表示の切り替えなど、多数あります。要素の変更はページ上ですばやく表示する必要があるため、私たちにとっては「突然」のように見えます。
注目すべき点の 1 つは、ブラウザが「少し賢い」ということです。ページのリフローをトリガーするコードが多数ある場合、ブラウザはそれらをすべて読み取って (マージして) まとめることができるため、次のコードは次の効果をもたらします。

/** CSS コード */
幅: 50px;
高さ: 50px;
背景色: 赤;
表示: なし;
変換: translateX(0);
transition: all .6s easy; // 役に立たないようです?

//js コード ds.style.display="block";
ds.style.transform="translateX(100px)"; 

ただし同様に、次のプロパティを操作する場合、ブラウザのレンダリング メカニズムにより、offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (IE では currentStyle) など、ページを強制的にレンダリングできる API がいくつかあります (詳細で正確な情報が必要となるため)。これにより、前後の 2 行が直接「2 回のレンダリング」と同等になります。

したがって、上記の js コードを次のように変更します。

//js コード ds.style.display="block";
ds.オフセット高さ;
ds.style.transform="translateX(100px)";

それでおしまい

現在、csdn公式サイトPC版のblinkリリースページでの画像アップロードも同様の機能を使用しています！

後になって、この方法ではページ構造を変更するために js が必要だと感じたので...

実装：記事の1行目を表示する効果を実現する方法

これは、位置の配置に基づいて「重なり合う」ことになります。つまり、2 つのインライン要素に配置属性が設定された後 (ただし、上/左/下/右の配置は追加されません)、後者が前者を覆います。このとき、位置は margin を通じて移動して表示できます。

インライン要素のみ可能であり、インライン ブロック要素は使用できません。 ——雲暁夢

その構造はおおよそ次のようになります。

<div class="page_list">
	<div class="z_two_page">
		<!-- 右側のポップアップ ボックスに表示される情報は次のとおりです -->
	</div>
	<div class="box">
		<!-- "ページ" マスク -->
		<div class="zb_mask"></div>
		<!-- ここが「ページ」データ構造が入る場所です (つまり、body タグの下にあるすべてのもの) -->
	</div>
	<!-- これはプレースホルダー要素です-->
	<div class="space"></div>
</div>

実際は次のようになります:

<div class="page_list">
	<div class="z_two_page">ハハハ</div>
	<div class="box">
		<div class="zb_mask"></div>
		
		<div id="ボックス">
		 <div class="left" style="background-color:#ffc5c5;"></div>
		 <div class="right" style="background-color:#7171f7;">
			 フレックスの2列レイアウトは、左側が固定され、右側が適応型です </div>
		</div>
		<div class="color"></div>
		<a href="#" rel="external nofollow" class="a">グローバル スタイルを設定するときは注意してください (これをスタイル リセットと呼びます)</a>
		<div class="center">
			<div class="ds"></div>
			<button class="but">指定された場所へ移動</button>
		</div>
		<フォームid="フォーム" アクション="#">
			<input type="submit" value="="幅木/>
		</フォーム>
		<img id="img" src="compress/compress/img/mxc_16x16.png" />
	</div>
	
	<div class="space"></div>
</div>

上記のように、クラス「box」の div には「元のページ全体」が含まれています。望ましい効果を得るために、フレックスレイアウトを使用します。

flex には、flex-grow、flex-shrink、flex-basis という 3 つのプロパティが省略形で含まれています。

• flex-grow: コンテナ内に余分なスペースがある場合の割り当てルールを指定します。デフォルト値は 0 で、余分なスペースは割り当てられません。
• flex-shrink: コンテナの残りスペースが不足している場合の割り当てルールを指定します。デフォルト値は 1 で、スペースが不足している場合はスペースを割り当てる必要があることを意味します。
• flex-basis: flex-basis は固定の割り当て量を指定します。デフォルト値は auto です。

設定する場合は、幅または高さの属性を設定する必要があります。

/* リストは水平方向にのみスクロールします */
.page_list { 幅: 100vw; 表示: flex; オーバーフローY: 非表示; }
/* メインコンテンツの幅 100%、白背景カバー率 */
.box { flex: 0 0 100vw; 高さ: 100%; 背景色: #fff; 位置: relative; オーバーフローy: auto; オーバーフローx: hidden; 遷移: all .6s easy; }
/** マスクレイヤースタイル*/
.zb_マスク{
	位置: 絶対;
	上: 0;
	左: 0;
	幅: 100%;
	高さ: 100%;
	zインデックス: 100;
	背景色: rgba(0,0,0,.2);
	ポインタイベント: なし;
	不透明度: 0;
	遷移: すべて .6 秒の緩和;
}
/* 水平スクロールスペースを解放するために使用される空のラベル要素*/
.space { flex: 0 0 12rem; }
/* ボタンは固定され、コンテンツの白い背景の後ろに隠れています */
.z_two_page { 幅: 12rem; 位置: 固定; 右: 0; 上: 0; }

つまり、何もせずにボックスの内容を表示します (これは、派手な div がない場合と同じ効果です)。 backgroundを使用して、背後にclass "space" を持つプレースホルダー要素をカバーします。"hahahaha" が表示されると、ボックスは右に移動します。

ここで注目すべき点は、「Hahaha」が属する div が前面にあり、「page」が属する div が背面にあるのはなぜかということです。
前述のとおり、ここではポジションオーバーレイが使用されており、そのルールは「後ろが前を覆う」というものなので、このレイアウト方法を使用する場合は、最初は隠れていた要素を前面に配置する必要があります。

コードの最初の 2 つの flex 属性の値は 0 です。これは、スペースが増減してもサイズは同じままであることを意味します (これがこの記事の基礎です)。3 番目の要素は、表示されるときの「デフォルト サイズ」を書き込みます。ご覧のとおり、ボックスはページをホストするため100vwですが、 class 「z_two_page」の要素はここでは12rem設定されています。この値は完全に変更できます。

では、私たちの視界に「ハハハハ」を映し出すにはどうすればいいのでしょうか？ —— js は「ページを表す要素」全体の動きを制御できます。

ここには「マスクレイヤー効果」があります。従来の js 実装に従って、表示を見つける必要があります。さらに、前述の「表示アニメーション効果」を使用して、エクスペリエンスを向上させることができます。
ただし、この記事の上記の CSS コードには、要素が貫通可能かどうかを示すpointer-events属性が追加されています。これを none に設定すると、対応する要素が存在するかどうかを気にする必要がなくなり (イベントの観点からは、存在してもしなくても同じです)、表示などを制御する必要がなくなるため、パフォーマンスが大幅に向上します。

右 = document.querySelector(".right");
box = document.querySelector(".box"); とします。
マスクを document.querySelector(".zb_mask"); とします。
right.onclick=関数(){
 box.style.marginLeft="-12rem";
 mask.style.cssText+="不透明度: 1; ポインターイベント: all;"
}
マスク.onclick=関数(){
 ボックススタイルマージン左="0";
 mask.style.cssText+="不透明度: 0; ポインターイベント: なし;"
}

最後に、右側の空白やネイティブ ジェスチャがページ全体に与える影響など、モバイル ページの表示に関するいくつかの問題を考慮して、通常は CSS でhtml{max-width: 100vw;overflow-x: hidden;}を設定します。ユーザーがモバイル デバイスでのみポップアップ サイドバーをクリックできるようにしたい場合は、ここで CSS に制限を追加できます。上記の関数を PC でのみ有効になるように設定します。

@media (任意のホバー: なし) {
	.ページリスト{
		オーバーフロー-x:非表示;
	}
}

JS ページ サイドバー効果の調査に関するこの記事はこれで終わりです。より関連性の高い js ページ サイドバー コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。