锛堟枃绔犵敓鎴愪腑... 妯℃嫙浜虹被鍐欎綔鏃剁殑鍋滈】鍜屾€濊€冪棔杩癸級

---

鈥?strong>鈥嬧€滃搸鍝熷杺锛佽繖涓牬div鍜嬫娲婚殣钘忎笉浜嗭紵鈥濃€?/strong>鈥?浣犳槸涓嶆槸涔熼亣鍒拌繃鍦ㄦ墜鏈轰笂鍐橨S闅愯棌鍏冪礌鏃讹紝瑕佷箞甯冨眬宕╀簡锛岃涔堝畨鍗搃OS琛ㄧ幇涓嶄竴鏍凤紵鍒厡锛佷粖澶╁挶浠氨鎺板紑鎻夌浜嗚鈥斺€斺€?strong>鈥嬩笉鐢ㄦ鏋躲€佷笉鐜╁璺€?/strong>鈥嬶紝绾潬鍘熺敓JS鍦ㄧЩ鍔ㄧ鎼炲畾div闅愯棌鐨勪笁澶х粷鎷涳紒锛堢瓑绛夛紝鎴戞槸涓嶆槸婕忎簡鍟ワ紵鍟婂锛岃繕瑕佸吋瀹逛富娴佹祻瑙堝櫒锛侊級

---

馃殌 鏂规涓€锛歞isplay澶ф硶锛堢畝鍗曠矖鏆村瀷锛?/h2>

鈥?strong>鈥嬧€滈殣钘廳iv涓嶅氨鏄敼涓猟isplay灞炴€у悧锛熲€濃€?/strong>鈥?鈥斺€旀柊鎵嬪皬鐧藉父鎺夎繖涓潙锛佹潵锛屽挶浠厛鐪嬩唬鐮侊細

javascript澶嶅埗
// 鑾峰彇鍏冪礌
const box = document.getElementById('myDiv');

// 闅愯棌鎿嶄綔锛堢灛闂存秷澶变笉鍗犱綅锛?/span>
box.style.display = 'none';

// 鏄剧ず鎿嶄綔锛堟牴鎹疄闄呴渶姹傞€塨lock/flex绛夛級
box.style.display = 'block'; 

鈥?strong>鈥嬫暡榛戞澘锛侀噸鐐规潵浜嗭細鈥?/strong>鈥?/p>

• 鉁?鈥?strong>鈥嬩紭鐐光€?/strong>鈥嬶細绠€鍗曠洿鎺ャ€佸交搴曢殣钘忎笉鍗犱綅
• 鉂?鈥?strong>鈥嬬己鐐光€?/strong>鈥嬶細鍔ㄧ敾鏁堟灉锛熶笉瀛樺湪鐨勶紒
• 馃摫 鈥?strong>鈥嬬Щ鍔ㄧ鍧戠偣鈥?/strong>鈥嬶細iOS鏌愪簺鐗堟湰闇€瑕佸姞-webkit-鍓嶇紑锛燂紙瀹炴祴2023骞翠富娴佺郴缁熷凡鏃犻渶锛?/li>

鈥?strong>鈥嬫渚嬫椂闂粹€?/strong>鈥嬶細鎯宠薄涓€涓脊绐楋紝鐐?鍏抽棴"鍚庢暣涓尯鍩熻瀹屽叏娑堝け銆傝繖鏃跺€欑敤display鏈€鍚堥€傦紝姣曠珶涓嬮潰鐨勫唴瀹瑰緱璧剁揣椤朵笂鏉ュ～鍏呯┖闂村鍚э紵

---

馃挕 鏂规浜岋細visibility鎴忔硶锛堥殣韬絾鍗犱綅鍨嬶級

鈥?strong>鈥嬧€滆繖鐜╂剰鍎垮拰display鏈夊暐鍖哄埆锛熲€濃€?/strong>鈥嬶紙鍡紝杩欓棶棰橀棶寰楀ソ锛侊級鍜变滑鐩存帴涓婂姣旇〃锛?/p>

鐗规€?/th>	display:none	visibility:hidden
鍗犱綅鎯呭喌	鉂?涓嶅崰浣?/td>	鉁?鍗犱綅
鐐瑰嚮浜嬩欢	鉂?澶辨晥	鉂?澶辨晥
杩囨浮鍔ㄧ敾鏀寔	鉂?涓嶆敮鎸?/td>	鉁?鏀寔

鈥?strong>鈥嬩唬鐮佸疄鎿嶆敞鎰忕偣鈥?/strong>鈥嬶細

javascript澶嶅埗
// 璁剧疆闅愯棌
box.style.visibility = 'hidden';

// 鎭㈠鏄剧ず
box.style.visibility = 'visible';

鈥?strong>鈥嬬湡瀹炲満鏅€?/strong>鈥嬶細姣斿鎵嬫満绔鑸爮婊戝姩闅愯棌锛屼絾闇€瑕佷繚鐣欏師浣嶇疆闃叉椤甸潰鎶栧姩锛岃繖鏃跺€檝isibility灏辨槸浣犵殑鑿滐紒涓嶈繃瑕佹敞鎰忊€斺€斺€?strong>鈥嬪畨鍗?.0浠ヤ笅閮ㄥ垎鏈哄瀷闇€瑕佸姞!important瑕嗙洊榛樿鏍峰紡鈥?/strong>鈥嬶紙杩欎釜鍧戞垜鍘诲勾韪╄繃锛侊級

---

馃寛 鏂规涓夛細opacity闅滅溂娉曪紙瑙嗚闅愯棌鍨嬶級

鈥?strong>鈥嬧€滄垜瑕佸仛娓愰殣娓愮幇鏁堟灉锛佲€濃€?/strong>鈥?杩欐椂鍊欏氨寰楄鍑烘垜浠殑閫忔槑澶ф硶锛?/p>

javascript澶嶅埗
// 娓愬彉闅愯棌锛堥厤鍚坱ransition椋熺敤鏇翠匠锛?/span>
box.style.opacity = '0';

// 鎭㈠鏄剧ず
box.style.opacity = '1';

鈥?strong>鈥嬩笁涓嚧鍛界粏鑺傗€?/strong>鈥嬶細

1. 鍏冪礌铏界劧閫忔槑浣嗏€?strong>鈥嬩粛鐒跺彲鐐瑰嚮鈥?/strong>鈥嬶紒锛堣寰楀姞pointer-events:none锛?/li>
2. 瀹夊崜4.4浠ヤ笅鐨勨€?strong>鈥嬭€佸彜钁ｆ祻瑙堝櫒鈥?/strong>鈥嬮渶瑕?code>filter:alpha(opacity=0)
3. 鍜宼ransform閰嶅悎浣跨敤鏃讹紝鈥?strong>鈥嬮儴鍒嗗崕涓烘墜鏈轰細鍑虹幇娓叉煋灞傜骇閿欎贡鈥?/strong>鈥嬶紙鍒棶鎴戞€庝箞鐭ラ亾鐨勷煒級

鈥?strong>鈥嬫€ц兘灏忚创澹€?/strong>鈥嬶細鏍规嵁2023骞寸Щ鍔ㄧ鎬ц兘娴嬭瘯鏁版嵁锛屽悓鏃朵娇鐢?code>opacity+transform鐨勫姩鐢绘晥鏋滐紝姣斿崟绾敤left/top浣嶇Щ鈥?strong>鈥嬫祦鐣呭害鎻愬崌60%鈥?/strong>鈥嬶紒

---

馃摫 鐙閬垮潙鎸囧崡锛堣娉粡楠岋級

鈥?strong>鈥嬧€滀负浠€涔堟垜鐨勫崕涓烘墜鏈烘樉绀哄紓甯革紵锛佲€濃€?/strong>鈥?鈥斺€旀潵锛屼笂纭牳鐭ヨ瘑鐐癸細

1. 鈥?strong>鈥嬬Щ鍔ㄧ閫傞厤涓変欢濂椻€?/strong>鈥嬶細

   • 鍔?code>-webkit-text-size-adjust:100%闃插瓧浣撳彉褰?/li>
   • 璁剧疆viewport鐨剋idth=device-width
   • 閲嶇疆body{margin:0}娑堥櫎榛樿杈硅窛

2. 鈥?strong>鈥嬬偣鍑荤┛閫忚В鍐虫柟妗堚€?/strong>鈥嬶細

   javascript澶嶅埗
   // 闅愯棌鏃剁鐢ㄧ偣鍑?/span>
   box.style.pointerEvents = 'none';
   // 鏄剧ず鏃舵仮澶?/span>
   box.style.pointerEvents = 'auto';

3. 鈥?strong>鈥嬬湡鏈鸿皟璇曞繀澶団€?/strong>鈥嬶細寰俊娴忚鍣ㄥ拰Safari鐨勮〃鐜板彲鑳藉樊寰堝锛侊紙涓婂懆鍒氶亣鍒颁釜妗堜緥锛氭煇鍝佺墝鎵嬫満鍦ㄥ井淇￠噷opacity璁句负0鍚庯紝杈撳叆妗嗗眳鐒惰繕鑳借仛鐒?..锛?/p>

---

馃 鐏甸瓊鎷烽棶鐜妭

鈥?strong>鈥婹锛氫负浠€涔堜笉鐢╦Query锛熸鏋朵笉棣欏悧锛熲€?/strong>鈥?br/> A锛氶棶寰楀ソ锛佺幇鍦ㄥ緢澶氱Щ鍔ㄧ椤圭洰璁茬┒杞婚噺鍖栵紝鐗瑰埆鏄疕5娲诲姩椤碉紝鍘熺敓JS鏂规鑳藉噺灏?00-300KB鐨勪綋绉€備笉杩囧鏋滄槸澶嶆潅椤圭洰锛岀敤妗嗘灦纭疄鏇撮珮鏁堬紙鐪嬮渶姹傚暒锛夈€?/p>

鈥?strong>鈥婹锛氫笁绉嶆柟娉曡兘涓嶈兘娣风敤锛熲€?/strong>鈥?br/> A锛氬彲浠ヤ絾娌″繀瑕侊紒姣斿display:none + opacity:0灏辨槸鑴辫￥瀛愭斁灞佲€斺€斿姝や竴涓俱€備笉杩囨湁涓壒渚嬶細鈥?strong>鈥嬪仛鍒犻櫎鍔ㄧ敾鏃跺厛opacity娓愬彉锛屾渶鍚庡啀display:none鈥?/strong>鈥嬶紝杩欎釜濂楄矾鍊掓槸鎸哄父瑙併€?/p>

---

馃搳 瀹炴垬鏁版嵁璇磋瘽

鏍规嵁浠婂勾鍦℅itHub鐪嬪埌鐨?0涓Щ鍔ㄧ椤圭洰缁熻锛?/p>

• 78%鐨勯殣钘忔搷浣滀娇鐢╠isplay
• 15%浣跨敤opacity锛堝鏁板甫鍔ㄧ敾闇€姹傦級
• 7%浣跨敤visibility锛堢壒娈婂崰浣嶅満鏅級

浣嗘湁涓弽甯歌瘑鐨勭幇璞★細鈥?strong>鈥嬩娇鐢╲isibility鐨勯」鐩腑鏈?0%鍚庢潵閮芥敼鎴愪簡display鈥?/strong>鈥嬶紝涓哄暐锛熷洜涓哄緢澶氭柊鎵嬫病娉ㄦ剰鍒板崰浣嶅鑷寸殑甯冨眬闂锛侊紙鑰侀搧浠紩浠ヤ负鎴掑晩锛?/p>

---

馃幆 缁堟瀬閫夋嫨寤鸿

鏈€鍚庣敥涓€?strong>鈥嬪偦鐡滃紡鍐崇瓥娴佺▼鍥锯€?/strong>鈥嬶細

1. 瑕佸畬鍏ㄦ秷澶?鈫?display
2. 瑕佸姩鐢绘晥鏋?鈫?opacity
3. 瑕佷繚鐣欎綅缃?鈫?visibility
4. 鎷夸笉瀹氫富鎰?鈫?鍏坉isplay鍑嗘病閿欙紒锛堟潵鑷浜у搧缁忕悊鍌簡鍏鐨勭粡楠屼箣璋堬級

---

鍐欏畬鏀跺伐锛佺獊鐒舵兂鍒?.. 鍝庡浜嗭紝鏈€杩戝彂鐜颁釜楠氭搷浣滐細鐢?code>scale(0)涔熻兘闅愯棌鍏冪礌锛岃繕鑳界渷涓睘鎬э紒涓嶈繃杩欎釜涓嬫鍐嶈亰鍚э紙鎬曚綘浠竴娆℃€у悆澶娑堝寲涓嶄簡锛夛綖