通過使用最小寬度和最大寬度一起應用過渡

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