我正在尝试对选中的ul元素进行动画处理,但是它不起作用,我不确定它是否与translateY动画或ul元素有关。我已经尝试使用“ +”代替“〜”,但是仍然遇到相同的问题。
.events{
position: absolute;
width: 100%;
color: #fff;
font-family: Verdana;
box-sizing: border-box;
transform: translateY(120%);
top: 120px;
transition: all 0.5s;
}
.events li {
background-color: rgba(0,0,0,0.8);
width: 319px;
height: 120px;
margin: auto;
margin-bottom: 10px;
border-radius: 10px;
}
.swipe-container {
position: absolute;
bottom: 0;
width: 100%;
height: 130px;
text-align: center;
background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}
#swipe-up {
display: none;
}
.icon-swipe {
font-size: 50px;
color: #fff;
font-family: Oswald light;
cursor: pointer;
}
#swipe-up:checked ~ .events{
transform: translateY(0%);
}
<div id="events-wrapper">
<div class="swipe-container">
<input type="checkbox" id="swipe-up">
<label class="icon-swipe" for="swipe-up">eventos</label>
</div>
<nav class="events">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</nav>
</div>
首先,我建议对列表(.events)使用实际的<ul>
,现在它是导航html标签<nav>
。 ;)