css - 如何在加载页面上修复运动菜单？

我有使用transform：translate（-100％）和transition的动画，但是当我加载页面时，我的代码块从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);

}

最佳答案

动画从.menuBlock处的left: 0开始，这就是transform: translateX(-100%)开始向左渐变的原因。

也许您可以将translateX函数替换为left，因为您具有固定宽度的.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;
}

我不建议您将固定宽度（以像素为单位）用于响应性问题;）

关于css - 如何在加载页面上修复运动菜单？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57738615/