如何用CSS轉換僞造寬度動畫？

Question

我試圖動畫側面菜單的寬度，從而使菜單中的「崩潰」，但我遇到的幾個限制：

• 我希望菜單仍然顯示在最左邊的20像素摺疊，所以你可以看到菜單的「可供性」。
• 我想避免動畫菜單的width，因爲我想避免內容重排。 （我設法通過在菜單中放置一個全寬度的容器來避免這種情況，這樣內部內容就會溢出，而不是迴流到菜單的大小）。
• 我想要使用CSS轉換，以便transition是GPU加速和性能，並且插值是平滑的（並且還避免了昂貴的迴流）。

這是菜單的初始狀態：

這是我希望達到的最終狀態：

使用transform: translateX(-Npx)的告誡是，菜單的剩餘可供性是最右邊的，而不是我在左邊顯示的'點'。我希望我可以在菜單欄頂部有一個可以移動菜單的面具來隱藏它的內容，但是我相信在CSS中不存在。

對於如何僞造此寬度動畫，理想情況下使用CSS轉換，您有任何想法嗎？

非常感謝！

更新：我創建這個小提琴與我有什麼：https://jsfiddle.net/o437cpcc/1/（問題是，菜單的最終應用具有潛在的數百個項目，更多的文字，使寬度的過渡非常laggy的。）

這個其他的小提琴是轉換的方法，當與內部數百個DOM節點進行測試時性能更高，因爲它不會觸發迴流並且動畫是GPU加速的：https://jsfiddle.net/vr1hnwd6/1/。 （問題是，由於整個框被翻譯，點也移動）。

Answer 1

一個可能性是以相反的方式動畫內部ul。

開始符號相反的翻譯，並以零翻譯

html, body { 
 
    margin:0; 
 
    padding:0; 
 
    height:100%; 
 
} 
 

 
#menubar { 
 
    width: 400px; 
 
    -webkit-transform: translateX(-370px); 
 
      transform: translateX(-370px);  
 
    background-color: #DDDDDD; 
 
    height:100%; 
 
    overflow:hidden; 
 
    -webkit-transition: 1500ms -webkit-transform; 
 
      transition: 1500ms transform; 
 
} 
 

 
#menubar:hover, #menubar:hover ul { 
 
    -webkit-transform: translateX(0); 
 
      transform: translateX(0); 
 
} 
 

 
ul { 
 
    -webkit-transform: translateX(370px); 
 
      transform: translateX(370px);  
 
    -webkit-transition: 1500ms -webkit-transform; 
 
      transition: 1500ms transform; 
 
    width: 400px; 
 
    margin:0; 
 
    padding:0; 
 
    list-style-type: none; 
 
} 
 

 
ul li { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding: 25px 10px; 
 
    background-color: #C6C6C6; 
 
    font-family: sans-serif; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    margin-bottom:3px; 
 
    cursor:pointer; 
 
} 
 

 
ul li:hover { 
 
    background-color: #D6D6D6; 
 
} 
 

 
ul li .dot { 
 
    width:10px; 
 
    height:10px; 
 
    border-radius:10px; 
 
    background-color: teal; 
 
} 
 

 
ul li .title { 
 
    margin-left:15px; 
 
}

<div id="menubar"> 
 
    <ul> 
 
     <li><div class="dot"></div><div class="title">Item example</div></li> 
 
     <li><div class="dot"></div><div class="title">Item example</div></li> 
 
     <li><div class="dot"></div><div class="title">Item example</div></li> 
 
     <li><div class="dot"></div><div class="title">Item example</div></li> 
 
     <li><div class="dot"></div><div class="title">Item example</div></li> 
 
     
 
    </ul> 
 
</div>