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

Posted 2023-03-07

【中文标题】通过同时使用 min-width 和 max-width 来应用过渡

【英文标题】：Apply transition by using min-width and max-width together

【发布时间】：2016-09-23 10:51:35

【问题描述】：

我有一个导航栏，我正在尝试使切换按钮工作，我的切换按钮是一个复选框，因此以下是当您单击复选框时使导航栏 (#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 是复选按钮，我可以通过一次应用 min-width 或 max-width 使用过渡平滑关闭导航栏或使用过渡平滑打开导航栏，但我该如何使用它们使用转换平滑地打开和关闭导航栏。

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

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

【参考方案1】：

应该写在一个规则中：

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

transition CSS 属性是transition-property、transition-duration、transition-timing-function 和transition-delay 的简写属性。它使您能够定义元素的两种状态之间的转换。可以使用 :hover 或 :active 等伪类定义不同的状态，也可以使用 javascript 动态设置。

语法

/* 应用于 1 个属性 */

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

过渡：margin-left 4s;

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

过渡：margin-left 4s 1s;

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

transition: margin-left 4s ease-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;