Css 防止屏幕外div在调整大小时移动

我有一个抽屉菜单，点击按钮后出现在屏幕上。使用绝对定位时过渡有点滞后，所以我使用translate3d。菜单有两种宽度。对于移动设备和600px及以上的视口，其100%的视图为395px。我注意到的一个怪癖是，如果我要调整屏幕大小，菜单会微妙地出现。发生这种情况时，有没有办法让菜单完全远离屏幕

注意：若要查看此内容，请将剪下的屏幕展开为全屏，并水平调整为600px或更低。您应该看到div出现并返回屏幕

$（'button'）。在（'click'，function（）上{
$（'抽屉'）.toggleClass（'活动'）；
});
html，
身体{
身高：100%；
保证金：0；
}
#抽屉{
宽度：100%；
身高：100%；
背景颜色：灰色；
过渡：转变。5s轻松；
转换：translate3d（-100%，0，0）；
}
#抽屉。活动的{
变换：translate3d（0,0,0）；
}
@介质（最小宽度：600px）{
#抽屉{
变换：translate3d（-395px，0，0）；
宽度：395px；
}
}
钮扣{
位置：绝对位置；
顶部：10px；
左：10px；
}

切换抽屉
问题：在抽屉的transform属性上设置了转换。当点击指定的介质查询时，抽屉将转换到其新的x坐标

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


$（'button'）。在（'click'，function（）上{
$（'抽屉'）.toggleClass（'活动'）；
});
html，
身体{
身高：100%；
保证金：0；
}
#抽屉{
宽度：100%；
身高：100%；
位置：绝对位置；
左-100%；
背景颜色：灰色；
过渡：转变。5s轻松；
变换：translate3d（0,0,0）；
}
#抽屉。活动的{
转换：translate3d（100%，0，0）；
}
@介质（最小宽度：600px）{
#抽屉{
左：-395px；
宽度：395px；
}
#抽屉。活动的{
转换：translate3d（395px，0，0）；
}
}
钮扣{
位置：绝对位置；
顶部：10px；
左：10px；
}

切换抽屉
它对我不起作用您的问题是转换规则。当您的视口调整大小时，新的转换规则将生效。5i.但什么是保持转换完整的最佳解决方案？@CarlEdwards可能会通过JavascriptTrue禁用window.resize上的样式规则。只是讨厌为了这么小的东西走js路线。