这是我试图实施的简化版本。单击label
时,它会切换一个复选框,并使用display:block
和淡入显示叠加层。在叠加层中是另一个label
,它应该反向执行相同的操作。但是,叠加层不会淡出,但会突然消失。
我一直在摆弄normal/reverse
和forwards/backwards
,但没有任何变化。我知道这只是CSS动画如何工作的一些细节,但我不清楚如何在未选中#toggle
时反转动画。
http://jsfiddle.net/mblase75/5cnsn38L/
@keyframes fadein {
0% {
opacity: 0;
display: none;
}
1% {
opacity: 0;
display: block;
}
100% {
opacity: 1;
display: block;
}
}
#toggle {
display: none;
}
label {
cursor: pointer;
}
.overlay {
position: absolute;
background: green;
width: 100%;
display: none;
animation: fadein ease-in 0.6s 1 reverse forwards;
}
#toggle:checked ~ .overlay {
animation: fadein ease-in 0.6s 1 normal forwards;
display: block;
}

<input type="checkbox" id="toggle">
<div class="overlay">
<br><br><br><br><br><br>
<label for="toggle">Click to deactivate</label>
</div>
<label for="toggle">Click to activate</label>
&#13;
答案 0 :(得分:0)
我认为这与使用display: none
和display: block
有关。为什么不使用transition
和opacity
呢?它更简单
label {
cursor: pointer;
}
.overlay {
position: absolute;
background: green;
width: 100%;
opacity: 0;
transition: opacity ease-in 0.6s;
}
#toggle:checked ~ .overlay {
opacity: 1;
}
&#13;
<input type="checkbox" id="toggle">
<div class="overlay">
<br><br><br><br><br><br>
<label for="toggle">Click to deactivate</label>
</div>
<label for="toggle">Click to activate</label>
&#13;