Question

我想在侧面菜单展开和折叠时进行动画处理，但是它的结构方式使我无法使用转换（或者至少我不确定如何正确使用它）。我目前正在使用宽度为其设置动画，并且它不太平滑，特别是在右侧的相对div包含网格的情况下，该网格会进一步减慢动画的播放速度（在我没有任何网格的页面上不可见）或表格）。

因为我的图标在左侧，所以我无法使用translateX为其设置动画，因为这些图标最初不会显示。

我尝试使用scale，但折叠和展开菜单时只是“挤压”了菜单。

我应该真正使用哪种方法制作平滑的动画，而不受重新缩放的相对div的限制。我知道它很平滑，但是一旦我开始在相对正确的div上添加大量内容，使用width进行动画设置就很麻烦。

这是一个例子

const sideMenu = document.getElementById('sidemenu');

sideMenu.addEventListener('click', function() {
	sideMenu.classList.toggle('collapsed');
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
}

#sidemenu {
  width: 170px;
  height: 100vh;
  background-color: #EB7575;
  transition: 0.3s ease-in-out;
}

#sidemenu.collapsed {
  width: 60px;
}

ul {
  list-style-type: none;
}

ul li {
  position: absolute;
  display: block;
}

ul li a {
  position: relative;
  display: table;
  text-decoration: none;
}

ul li a span {
  display: table-cell;
  vertical-align: middle;
  color: white;
  white-space: nowrap;
  display: inline-block;
}

.icon {
  display: table-cell;
  vertical-align: middle;
  font-size: 24px;
  width: 60px;
  text-align: center;
  color: white;
}

.relative-div {
  position: relative;
}

<html>
  <head>
    <link href="https://unpkg.com/ionicons@4.5.10-1/dist/css/ionicons.min.css" rel="stylesheet">
  </head>
  
  <body>
    <div id="sidemenu">
      <ul>
        <li>
          <a href="#">
            <i class="icon ion-md-settings"></i><span>Settings</span>
          </a>
          <a href="#">
            <i class="icon ion-md-add"></i><span>Add something</span>
          </a>
          <a href="#">
            <i class="icon ion-md-download"></i><span>Download bits</span>
          </a>
        </li>
      </ul>
    </div>
    
    <div class="relative-div">
      Relative div
    </div>
  </body>
</html>

Answer 1

（据我所知）您有3种选择：

使导航位置固定/绝对，同时向主体添加填充，以防止相对div进入其下方。 缺点：导航后，导航将位于内容之上。
同时移动导航和div，以防止重新计算图层。 缺点：内容将不在屏幕上。
在您真正注意到这是一个问题之前，请不要担心。

带有图标的侧边菜单动画流畅

1 个答案: