は（そう、以下のナビゲーションバーを作るためのCSSがあり、私のトグルボタンはチェックボックスで、私はトグルボタンの仕事をしようとしていたためにナビゲーションバーを持っている分、幅と一緒に、最大幅

Question

を使用してトランジションを適用します。あなたがチェックボックス

.nav-triggerはチェックボタンで、私はトランジションを使用してスムーズにナビゲーションバーを閉じたり最小幅またはMAX-を適用することにより、トランジションを使用してスムーズにナビゲーションバーを開くことがいずれかのことができました

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

をクリックしたとき#navbar-left）が表示されます幅を一度に変更することはできますが、どのようにしてそれらを使用して、移行を使用してスムーズにナビゲーションバーを開閉することができます。

私はいつもwidthプロパティをautoに設定したので、widthプロパティを使ってトランジションを単純に適用することはできません。最善の解決策やこれを達成するための任意の別の方法だろう何

？

Answer 1

は、単一のルール内に書き込まなければならない：

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

遷移CSSプロパティは、遷移性、遷移期間、遷移タイミング機能、および遷移遅延の短縮形特性であります。要素の2つの状態間の遷移を定義することができます。さまざまな状態は、擬似クラスを使用して定義することができます。ホバー、または：JavaScriptを使用してアクティブまたは動的に設定します。

Syntaxe

/* 1つの*プロパティ/

/*プロパティ名に適用します|期間*/

の移行：マージン左4S。

/*プロパティ名|期間|遅延*/

の移行：マージン左4Sの1S;

/*プロパティ名|期間|タイミング機能|遅延*/

の移行：マージン左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; 
}