选中和取消选中复选框时展开和折叠 div 带有过渡

Question

我正在扩展一个 div 选中复选框时的过渡。但是当我取消选中该复选框时，div 会在没有过渡的情况下消失。我需要帮助将 div 移开。

提前致谢。

.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>

Answer 1

background-image 上的属性 unset 不适用于 transition。您必须在 .navigation__background 上设置渐变并且仅过渡宽度：

.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>

选中和取消选中复选框时展开和折叠 div 带有过渡

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

html

css

sass

css-transitions