javascript - 如何缓解 body 左侧？

Question

所以我正在尝试做一个弹出式菜单，但我遇到了一点问题。

我已经申请了:

.menu-side, .menu {
    -webkit-transition: left 0.2s ease;
    -moz-transition: left 0.2s ease;
    transition: left 0.2s ease;
}

.menu 设置为正文，menu-side 设置为弹出菜单。加载弹出菜单时，菜单和正文的左侧都会发生变化。但出于某种原因，它没有正确缓和？

Answer 1

问题是 left 的初始值属性是 auto。

因此，浏览器不知道如何进行从auto 到180px 的转换。

要修复它，您必须首先将其设置为 0:

.menu {
    left: 0px;
    transition: left 0.2s ease;
}
.menu-open {
    left: 180px;
}

.menu {
  left: 0px;
  transition: left 0.2s ease;
  background: red;
  position: relative;
  height: 200px;
}
:checked ~ .menu { /* .menu-open */
  left: 180px;
}

<input id="toggler" type="checkbox" />
<label for="toggler">Toggle</label>
<div class="menu"></div>