javascript - 如何折叠左侧面板？

Question

我正在寻找一种使左侧面板折叠的方法。我不想在 map /站点上移动或调整任何其他内容。只是为了让左侧面板可折叠。理想情况下使用滑动动画而不是弹出和弹出。 Here's a link to my website with the panel in question

将不胜感激!

Answer 1

您可以使用 left 属性上的 CSS transition 来执行此操作，以使对此值的更改平滑地动画化。然后添加和删除一个更改 left 值以切换侧边栏可见性的类。

.left-side-bar {
    transition: left .8s ease-in;
}

.left-side-bar.is-out {
    left: -16.666%; /* equal to the sidebar's width */
}

它默认可见。使用 JavaScript 添加/删除 is-out 类以使其隐藏。