Home Expand and collaps div with transition when checkbox is selected and deselected

Questions

Expand and collaps div with transition when checkbox is selected and deselected

November 28, 2021

I’m expanding a div with transition when the checkbox is selected. But when I deselect the checkbox, the div disappears without transition. I need help with transitioning the div away.

Thank you in advance.

.navigation {
  background-color: rgba(red, .8);
  float: left;
  width: 100vw;
  z-index: 2000;
  transition: .5s ease-in-out;
}

.navigation__checkbox {
  z-index: 2500;
}
.navigation__background {
  height: 100vh;
  width: 0;
  right: 0;
  top: 0;
  position: fixed;
  background-image: unset;
  z-index: 1000;
  transition: width .3s ease-in-out;
}

 
.navigation__checkbox:checked ~ .navigation__background {
  background-image: linear-gradient(blue, gray);
  width: 90%;
  /*transition: width .5s ease-in-out;*/
}

<div class="navigation" id="navigation">


  <input type="checkbox" class="navigation__checkbox" id="nav-toggle" />
  <label for="nav-toggle" class="navigation__button" id="navigation-button">
        <span class="navigation__icon">&nbsp;</span>
    </label>

  <div class="navigation__background">&nbsp;</div>
</div>

>Solution :

The property unset on background-image will not work with transition. You have to set your gradient on .navigation__background and only transition the width:

.navigation {
  background-color: rgba(red, .8);
  float: left;
  width: 100vw;
  z-index: 2000;
  transition: .5s ease-in-out;
}

.navigation__checkbox {
  z-index: 2500;
}

.navigation__background {
  height: 100vh;
  width: 0;
  right: 0;
  top: 0;
  position: fixed;
  background-image: linear-gradient(blue, gray);
  z-index: 1000;
  transition: width .3s ease-in-out;
}

 
.navigation__checkbox:checked ~ .navigation__background {
  width: 90%;
}

<div class="navigation" id="navigation">
  <input type="checkbox" class="navigation__checkbox" id="nav-toggle" />
  <label for="nav-toggle" class="navigation__button" id="navigation-button">
    <span class="navigation__icon">&nbsp;</span>
  </label>

  <div class="navigation__background">&nbsp;</div>
</div>