Wenden Sie Übergang an, indem Sie min-width und max-width zusammen verwenden

Question

Ich habe eine Navigationsleiste, für die ich versuche, die Umschaltfläche funktionieren, meine Umschaltfläche ist ein Kontrollkästchen, so folgt die CSS, um die Navigationsleiste (#navbar-left) angezeigt, wenn Sie auf das Kontrollkästchen klicken

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

wo .nav-trigger das Kontrollknopf ist, ich in der Lage, die navbar reibungslos entweder schließen mit Übergang oder öffnen Sie die navbar glatt Übergang unter Verwendung durch die Anwendung min-width oder Max- Breite gleichzeitig, aber wie kann ich sie beide verwenden, um das Navbar glatt zu öffnen und zu schließen, die Übergänge verwendend.

Ich kann nicht einfach die Übergänge mit width Eigenschaft anwenden, weil ich immer die width Eigenschaft auf Auto festlegen muss.

Was wäre die beste Lösung oder alternative Möglichkeit, dies zu erreichen?

Answer 1

sollte innerhalb einer einzigen Regel geschrieben werden:

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

Der Übergang CSS-Eigenschaft ist eine zusammenfassende Eigenschaft für Übergangseigenschaft, Übergangszeit, Übergangszeitfunktion und Übergangsverzögerung . Sie können den Übergang zwischen zwei Zuständen eines Elements definieren. Verschiedene Zustände können unter Verwendung von Pseudoklassen wie: hover oder: aktiv oder dynamisch mittels JavaScript definiert werden.

Syntaxe

/* Übernehmen, um 1 Objekt */

/* Eigenschaftsname | Dauer */

Übergang: margin-left 4s;

/* Name der Immobilie | Dauer | Verzögerung */

Übergang: margin-left 4s 1s;

/* Name der Immobilie | Dauer | Zeitfunktion | Verzögerung */

Übergang: Rand links 4s Ease-In-Out 1s;

/* Anwenden auf 2 Eigenschaften */

transition: margin-links 4s, 1s Farbe;

/* Auf alle geänderten Eigenschaften */

Übergang: alle 0,5s Leichtigkeit-out;

/* Globale Werte */

Übergang: erben;

Übergang: initial;

Übergang: nicht gesetzt;

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