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>

Answer 2

就个人而言，我永远不会为body元素本身设置动画。你应该总是使用一个包装器，body有一些特殊的属性，但并不总是会让你期望div采取行动。但是，如果您在left: 0上手动设置body，则转换将起作用。

body {
    left: 0;
}

如何缓解身体的左侧？

2 个答案: