使用min-width和max-width一起应用过渡效果

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 是一个勾选按钮。我已经能够通过应用 min-width 或 max-width 来平滑地关闭或打开导航栏，但是如何同时使用它们来平滑地打开和关闭导航栏？

我不能简单地使用 width 属性来应用过渡效果，因为我必须将 width 属性始终设置为自动。

有没有最佳解决方案或任何其他方法来实现这一点？

- Umer Hassan

Answer 1

应该写在一个单一的规则内：

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

transition CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的速记属性。它使您能够定义元素两个状态之间的过渡。不同的状态可以使用伪类（如：:hover 或 :active）来定义，或者使用 JavaScript 动态设置。

# 语法

/* 应用于1个属性 */

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

transition: margin-left 4s;

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

transition: margin-left 4s 1s;

/* 属性名称 | 持续时间 | 过渡方式 | 延迟时间 */

transition: margin-left 4s ease-in-out 1s;

/ * 应用于2个属性 * /

transition: margin-left 4s, color 1s;

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

transition: all 0.5s ease-out;

/* 全局值 */

transition: inherit;

transition: initial;

transition: unset;

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

- G-Cyrillus