单击汉堡菜单时，侧面菜单转换动画无法正常工作

Question

我正在尝试创建一个侧面菜单，为了实现这一点，我使用了 left: -100% 然后当按下汉堡包按钮时它会动画到 left: 0% 但我开始知道这是不是很有效的方法。所以我切换到transform: translateX(-100%)。但它没有按预期工作。这是截图。

CSS代码

.nav-text-links-content {
    position: absolute;
    display: flex;
    gap: 20px;
    flex-direction: column;
    width: 100%;
    height: 85vh;
    top: 5rem;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    /* left: -100%; */
    opacity: 0;
    transition: transform 300ms linear;
  }

这是完整项目的 link codesandbox

Answer 1

translateX(-100%) 将元素向左平移 自己的 宽度。

为了一开始就隐藏它，它需要知道它最初的左边位置在哪里，然后翻译。没有给出左侧设置，因此它 'starts' 从它所在的位置开始。

我们需要将其放置在左侧，因此包含 left: 0 样式。

.nav-text-links-content {
    position: absolute;
    display: flex;
    gap: 20px;
    flex-direction: column;
    width: 100%;
    height: 85vh;
    top: 5rem;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    /* left: -100%; */
    left: 0; /* ADDED */
    opacity: 0;
    transition: transform 300ms linear;
  }

顺便说一句，尽管在这种情况下使用翻译确实可以 'more efficient' 效率可能并不重要，因为这不是连续动画，而是仅在用户单击不太可能的图标时发生持续但偶尔。

单击汉堡菜单时，侧面菜单转换动画无法正常工作

Side menu transform animations is not working properly when the hamburger menu is clicked

css

transform

reactjs