Html 侧菜单宽度动画？

我试图设置一个侧导航栏，点击汉堡图标显示/隐藏。 已经实现了这一点，但问题是，在ul内部的li也在活跃；我看到他们在过渡期缩小，然后随着导航部门的发展而增长。希望你们明白我的意思。我如何设置它以便只看到父元素（sideNav）的宽度“增长”？到目前为止，在李家看到这种转变有点难看

我正在为一个带有动态内容的CMS设计一个主题（因此大多数元素已经继承了样式，所以我试图找出是什么导致了li的动画），标记或多或少是这样的

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； }

.sideNav{
位置：固定；
排名：0；
左：0；
z指数：9；
宽度：0；
身高：100%；
溢出x：隐藏；
过渡：所有0.5s缓解；
}

菜单

通常，当我想要完成这项工作时，我会将左侧位置改为负宽度，而不是将宽度改为0px

.sideNav {
  position: fixed;
  top: 0;
  left: -250px;
  z-index: 9;
  width: 250px;
  height: 100%;
  overflow-x: hidden;
  transition: all 0.5s ease;
}

---

根据您的用例，可能不完全是您想要的，但可能是一个很好的替代方案

通常，当我想完成这项工作时，我会将左侧位置改为负宽度，而不是将宽度改为0px

.sideNav {
  position: fixed;
  top: 0;
  left: -250px;
  z-index: 9;
  width: 250px;
  height: 100%;
  overflow-x: hidden;
  transition: all 0.5s ease;
}

---

根据您的用例，可能不完全是您想要的，但可能是一个很好的替代方案

通过设置

宽度的动画

，您可以看到菜单内容的变化。您最好使用

变换

来隐藏菜单。通过设置

宽度

的动画，您可以找到菜单内容的原因。最好使用

transform

隐藏菜单。

function openNav() {
  document.getElementById("mySidenav").style.left= "0px";
}