通过同时使用 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 是检查按钮，我已经能够使用过渡平滑地关闭导航栏，或者通过一次应用最小宽度或最大宽度使用过渡平滑地打开导航栏，但是如何我可以同时使用它们来使用转换平滑地打开和关闭导航栏吗？

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

实现此目标的最佳解决方案或替代方法是什么？

Answer 1

应该写在一条规则内：

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It enables you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

Syntaxe

/* Apply to 1 property */

/* property name | duration */

transition: margin-left 4s;

/* property name | duration | delay */

transition: margin-left 4s 1s;

/* property name | duration | timing function | delay */

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

/* Apply to 2 properties */

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

/* Apply to all changed properties */

transition: all 0.5s ease-out;

/* Global values */

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

通过同时使用 min-width 和 max-width 应用过渡

Apply transition by using min-width and max-width together

html

css

width

css-transitions

Syntaxe