选中和取消选中复选框时，展开和折叠带有转换的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>