Syntaxe

Question

我有一个导航栏，我试图让切换按钮工作，我的切换按钮是一个复选框，所以下面是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属性简单地应用转换，因为我总是将{{1}}属性设置为auto。

什么是最佳解决方案或任何替代方法来实现这一目标？

Answer 1

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

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

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

Syntaxe

/ *适用于1个属性* /

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

过渡：margin-left 4s;

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

过渡：margin-left 4s 1s;

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

过渡：margin-left 4s easy-in-out 1s;

/ *适用于2个属性* /

过渡：margin-left 4s，color 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;
}

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

1 个答案:

Syntaxe