通过同时使用最小宽度和最大宽度来应用过渡

Question

我有一个导航栏，我要使其切换按钮起作用，我的切换按钮是一个复选框，因此下面是使该导航栏（#navbar-left）在单击该复选框时显示的CSS

#navbar-left{
 max-width: 0;
 min-width: 0;
 width: 0;
 transition: max-width 0.2s ease;
 transition: min-width 0.2s ease;
}

.nav-trigger:checked ~ #navbar-left {
  max-width: 200%;
  min-width: 20%;
  width: auto;
  float: left;
}

.nav-trigger复选按钮在哪里，我可以一次使用最小宽度或最大宽度通过过渡平滑地关闭导航栏，或者使用过渡平滑地打开导航栏，但是如何同时使用它们来打开和关闭导航栏导航栏使用过渡平滑。

我不能简单地使用width属性应用转换，因为我必须始终将width属性设置为auto。

什么是最好的解决方案或实现此目的的任何替代方法？

Answer 1

应该写在一条规则内：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition

transition CSS属性是过渡属性，过渡持续时间，过渡计时功能和过渡延迟的简写属性。它使您可以定义元素的两种状态之间的过渡。可以使用伪类（如：hover或：active）定义不同的状态，或使用JavaScript动态设置。

语法

/ *适用于1个属性* /

/ *属性名称| 持续时间* /

过渡：左边距为4s；

/ *属性名称| 持续时间 延迟* /

过渡：左边距4s 1s；

/ *属性名称| 持续时间 计时功能| 延迟* /

过渡：左边距4s缓入1s；

/ *应用于2个属性* /

过渡：左边距为4s，颜色为1s；

/ *应用于所有更改的属性* /

过渡：所有0.5s缓解；

/ *全局值* /

过渡：继承；

过渡：初始

过渡：未设置；

#navbar-left{
 max-width: 0;
 min-width: 0;
 width: 0;
 transition: max-width 0.2s ease,min-width 0.2s ease;
}

.nav-trigger:checked ~ #navbar-left {
  max-width: 200%;
  min-width: 20%;
  width: auto;
  float: left;
}