我正在嘗試創建一個側面選單，并實作我正在使用的功能left: -100%，然后當按下漢堡包按鈕時它會影片，left: 0%但我開始知道這不是很有效的方式。所以我切換到transform: translateX(-100%). 但它沒有按預期作業。這是一個截圖。
CSS 代碼
.nav-text-links-content {
position: absolute;
display: flex;
gap: 20px;
flex-direction: column;
width: 100%;
height: 85vh;
top: 5rem;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
/* left: -100%; */
opacity: 0;
transition: transform 300ms linear;
}
這是完整專案代碼框的鏈接
uj5u.com熱心網友回復：
translateX(-100%) 將元素向左平移其自身的寬度。
因此，為了最初隱藏它，它需要知道它的初始左側位置在哪里，然后進行翻譯。沒有給出左側設定，因此它從它所在的位置“開始”。
我們需要把它放在左邊，所以包括一個left: 0樣式。
.nav-text-links-content {
position: absolute;
display: flex;
gap: 20px;
flex-direction: column;
width: 100%;
height: 85vh;
top: 5rem;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
/* left: -100%; */
left: 0; /* ADDED */
opacity: 0;
transition: transform 300ms linear;
}
順便說一句，盡管在這種情況下使用 translate 確實可以“更有效”，但效率可能并不重要，因為這不是連續的影片，而是僅在用戶單擊不太可能連續但偶爾的圖示時發生。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/422174.html
標籤：
上一篇：如何通過本地存盤過濾回圈
下一篇：標簽標簽不可見