为什么我的导航栏向左滑动了 200 像素以上？

Question

我有一个导航栏反应组件。它在导航栏中有一个菜单按钮，当我单击它时，菜单应该向左滑动。你可以在这里看到：

const [toggleMenu, setToggleMenu] = useState(false);

{toggleMenu ? (
          <FiX
            opacity={0}
            className="navbar__menu-icon"
            color="#fff"
            size={27}
            onClick={() => setToggleMenu(false)}
          />
        ) : (
          <FiAlignRight
            className="navbar__menu-icon"
            color="#fff"
            size={27}
            onClick={() => setToggleMenu(true)}
          />
        )}
        {toggleMenu && (
          <div className="navbar__menu-container slide-left">
            <button className="navbar__menu-container_close">
              <FiX color="#000" size={27} onClick={() => setToggleMenu(false)} />
            </button>
            <div className="navbar__menu-container_links">
              <Menu />
            </div>
            <button className="navbar__menu-container_btn">Get in Touch</button>
          </div>
        )} 

因此，当我单击 FiAlignRight（菜单按钮）时，navbar__menu 容器向左滑动。向左滑动动画：

.slide-left {
  -webkit-animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
}

.navbar__menu-container {
    height: 100%;
    width: 200px;
    position: absolute;
    right: 0;
    z-index: 1;
    top: 0;
    background-color: #fff;
    overflow-x: hidden;
    padding-top: 60px;
  }

但是当我尝试时，navbar__menu-container 比我需要的多滑动了 200px

为什么会出现这种情况？

Answer 1

我的印象是，您认为导航栏是从屏幕外滑入的，但您尚未将其定位在屏幕外。

尝试

right: -200px;

.navbar__menu-container {
  right: -200px;
}

.slide-left {
  -webkit-animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
}
.navbar__menu-container {
    height: 100%;
    width: 200px;
    position: absolute;
    right: -200px;
    z-index: 1;
    top: 0;
    background-color: #fff;
    overflow-x: hidden;
    padding-top: 60px;
    
    background-color: aliceblue;
  }
  
body {overflow: hidden}

<div class="navbar__menu-container slide-left">
  <button>Get in Touch</button>
</div>

或者从 200px 变换为 0

@keyframes slide-left {
  0% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}

.slide-left {
  -webkit-animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.navbar__menu-container {
    height: 100%;
    width: 200px;
    position: absolute;
    right: 0;
    z-index: 1;
    top: 0;
    background-color: #fff;
    overflow-x: hidden;
    padding-top: 60px;
    
    background-color: aliceblue;
  }
  
body {overflow: hidden}

<div class="navbar__menu-container slide-left">
  <button>Get in Touch</button>
</div>