css - 防止屏幕外的 div 在调整大小时移动

Question

我有一个抽屉式菜单，它会在点击一个按钮后出现在屏幕上。使用绝对定位的转换有点滞后，所以我使用了 translate3d。菜单有两种宽度。一个是 100% 的移动 View 和 395px 的视口(viewport) 600px 及以上。我注意到的一个怪癖是，如果我要调整屏幕大小，菜单会巧妙地出现。发生这种情况时，有没有办法让菜单完全远离屏幕？

注意:要查看此内容，请将截图展开到全屏并将水平大小调整为 600 像素或更小。您应该会看到 div 出现并返回到屏幕外。

$('button').on('click', function() {
  $('#drawer').toggleClass('active');
});

html,
body {
  height: 100%;
  margin: 0;
}

#drawer {
  width: 100%;
  height: 100%;
  background-color: grey;
  transition: transform .5s ease-in;
  transform: translate3d(-100%, 0, 0);
}

#drawer.active {
  transform: translate3d(0, 0, 0);
}

@media (min-width: 600px) {
  #drawer {
    transform: translate3d(-395px, 0, 0);
    width: 395px;
  }
}

button {
  position: absolute;
  top: 10px;
  left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drawer"></div>

<button>Toggle Drawer</button>

Answer 1

问题:在抽屉的转换属性上设置了转换。当它命中指定的媒体查询时，抽屉会转换到它的新 x 坐标。

解决方案:不要将放置的责任完全放在变换上，而是使用绝对定位并首先将抽屉偏移到其负宽度。在这种情况下，它将是 395px。在事件状态下，transform3d 属性将是抽屉的宽度，以将其带回窗口的可见部分。

$('button').on('click', function() {
  $('#drawer').toggleClass('active');
});

html,
body {
  height: 100%;
  margin: 0;
}

#drawer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
  background-color: grey;
  transition: transform .5s ease-in;
  transform: translate3d(0,0,0);
}

#drawer.active {
  transform: translate3d(100%, 0, 0);
}

@media (min-width: 600px) {
  #drawer {
    left: -395px;
    width: 395px;
  }
  
  #drawer.active {
    transform: translate3d(395px, 0, 0);
  }
}

button {
  position: absolute;
  top: 10px;
  left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drawer"></div>

<button>Toggle Drawer</button>