侧面菜单对象上的translate（）仍然占用空间

Question

我不知道我做错什么了，但是我有一个带有一些图标的侧面菜单。单击其中一个图标时，它会向右展开350px，并显示说明该图标的文本。 为此，我使用了一些JavaScript，如果单击该JavaScript，它将添加/删除CSS类，然后执行transform: translateX()函数，并且图标/栏会展开或减去（请参见图片）。相当简单的imo。

我最近通过添加具有负边距的方法来做到这一点，然后在添加CSS类时将其更改为0，这是可行的。但是似乎已经达成共识，即您不应该translate边距（由于性能）。因此，我尝试了translateX()函数，该函数似乎可以正常工作，但是，我只是想知道它在单击时应该占据的空间（即，展开的条形图（请参见图片））总会占用空间。因此，如果我要单击应该扩展到栏的位置（当然是在关闭时），就像按钮一样，那我就不会，因为即使它没有展开，它也会占用空间。

那是translate函数的属性，还是我可以某种方式解决它？

编辑（请参见以下示例）： https://jsfiddle.net/1t5Lrgax/

在这里您会看到侧边栏，正如您所看到的，可以在顶部单击绿色按钮，但不能单击其大部分，当展开时，绿色按钮会被侧边栏覆盖。