如何修复加载页面上的移动菜单？

【问题标题】：How to fix movement menu on load page?如何修复加载页面上的移动菜单？
【发布时间】：2020-01-04 09:49:04
【问题描述】：

我有使用 transform:translate(-100%) 和过渡的动画，但是当我加载页面时，我的块从 0% 移动到 -100%；在正常情况下，她必须有 transform:translate(-100%) 并且选中复选框时 - transform:translate(0%) 它运行良好，但负载从 o 变为 -100%

https://katehrybkova.github.io/ETmenu/index.html - github 页面上的链接 https://github.com/katehrybkova/ETmenu - 来源

.menuBlock {
  background-color: #35393b;
  height: 100vh;
  color: white;
  padding: 25px 0;
  width: 400px;
  position: absolute;
  transform: translateX(-100%);
  transition: 1s;

}
#idishka:checked~.menuBlock {
  transform: translateX(0);

}

【问题讨论】：

标签： css css-transitions transform

【解决方案1】：

动画在left: 0 处以.menuBlock 开始，这就是transform: translateX(-100%) 开始向左淡出的原因。

也许你可以用left 替换translateX 函数，因为你有固定宽度的.menuBlock。

这是最终代码：

.menuBlock {
    background-color: #35393b;
    height: 100vh;
    color: white;
    padding: 25px 0;
    width: 400px;
    transition: 1s;
    position: absolute;
    left: -400px;
}
#idishka:checked ~ .menuBlock {
    left: 0;
}

我不建议您使用固定宽度（以像素为单位）来解决响应问题；）

【讨论】：