通过使用最小宽度和最大宽度一起应用过渡

Question

我有一个导航栏，我试图让切换按钮工作，我的切换按钮是一个复选框，所以下面是css，当你点击复选框时出现导航栏（ #navbar-left ）

#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/en-US/docs/Web/CSS/transition

转换CSS属性是转换属性，转换持续时间，转换时序功能和转换延迟的简写属性。 它使您能够定义元素的两个状态之间的转换。 可以使用伪类来定义不同的状态，例如：hover或：active或使用JavaScript动态设置。

Syntaxe

/ *适用于1个房产* /

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

过渡：保证金左4s;

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

过渡：保证金 - 左4s 1s;

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

转换：margin-left 4s轻松进出1s;

/ *适用于2个属性* /

过渡：边缘左边4s，颜色1s;

/ *适用于所有已更改的属性* /

过渡：全部0.5秒缓解;

/ *全球价值* /

过渡：继承;

过渡：初始;

过渡：未设置;

#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;
}