適應糊糊CSS/SVG菜單

Question

我一直在試圖理解和適應美麗的「糊糊菜單」貼在這裏...

http://codepen.io/lbebber/pen/pvwZJp

我最近嘗試以進行垂直/矩形菜單是這裏...

http://codepen.io/d3wannabe/pen/EVwEBE

但是我有一個問題，那我真的很努力修復 - 當你在第二個環節（我的）使用下拉菜單，在初始動畫完成後，在不斷擴大，整個菜單跳得很輕在左邊（而在崩潰時，它跳回到右邊）。如果你看看CSS（scss），我沒有應用任何x位置轉換/翻譯，所以我無法弄清楚可能會導致它的原因。

的代碼的唯一的一塊我有點懷疑，因爲我不完全理解它是...

.menu-open:checked~.menu-item{ 
    transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000); 

但仍須純粹的聲音相關的任何轉換應用到時間間隔而不是在x座標上的移位。

感謝您的任何想法，可能會導致這種不必要的跳躍！

Answer 1

在您的Codepen中，當顯示子項目時，它會導致正文頁面高度發生變化並溢出。

因此，顯示一個垂直滾動條，頁面寬度發生變化。

只是默認

body { 
    overflow-y: scroll; 
} 

Codepen Demo

添加滾動條如果更改您原Codepen佈局視圖到垂直選項，你可以看到，沒有出現滾動條（至少在我監控）。