适应糊糊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布局视图到垂直选项，你可以看到，没有出现滚动条（至少在我监控）。