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

Question

I have a nav bar for which I'm trying to make the toggle button work, my toggle button is a checkbox, so following is the css to make the navbar ( #navbar-left ) appear when you click on the checkbox

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

where .nav-trigger is the check button, I have been able to either close the navbar smoothly using transition or open the navbar smoothly using transition by applying min-width or max-width at a time, but how can I use them both to open and close the navbar smoothly using the transitions.

I cannot simple apply the transitions using width property because I've to always set the width property to auto.

What would be the best solution or any alternate way to achieve this?

Answer 1

should be written within one single rule :

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

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It enables you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

Syntaxe

/* Apply to 1 property */

/* property name | duration */

transition: margin-left 4s;

/* property name | duration | delay */

transition: margin-left 4s 1s;

/* property name | duration | timing function | delay */

transition: margin-left 4s ease-in-out 1s;

/* Apply to 2 properties */

transition: margin-left 4s, color 1s;

/* Apply to all changed properties */

transition: all 0.5s ease-out;

/* Global values */

transition: inherit;

transition: initial;

transition: unset;

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