我将下拉菜单的div设置为如下所示,当div打开时会发生这种情况:
.locationDropdownList {
position: absolute;
top: 83px;
width: 100%;
background: white;
z-index: 1000;
padding: 0 1rem 1rem 1rem;
animation: dropdown 250ms ease-in-out;
box-shadow: 0px 30px 25px 0px rgba(0, 0, 0, 0.2);
max-height: 250px;
overflow-x: hidden;
}
@keyframes dropdown {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
它在打开时有效,但是在关闭时又如何设置呢?我尝试在100%之下添加0%,但这没做任何事情。有什么建议吗?
更新:
所以它的工作原理如下
我有一个名为
LocationDropdown
的div的父级,当单击该父级时,会将一个名为focused
的类应用于父级,然后激活下拉列表以打开locationDropdownList
这是一个保存列表的div<div class="LocationDropdown">
<div>
<p class="locationSelectText">London</p>
</div>
</div>
当点击重点课程时
<div class="LocationDropdown focused">
<div>
<p class="locationSelectText">London</p>
</div>
<div class="locationDropdownList">
<ul>
<li></li>
.....
.....
</ul>
<ul>
<li></li>
.....
.....
</ul>
<ul>
<li></li>
.....
.....
</ul>
</div>
</div>
最佳答案
这是你的意思吗?
.locationDropdownList {
position: absolute;
top: 83px;
width: 100%;
background: white;
z-index: 1000;
padding: 0 1rem 1rem 1rem;
animation: dropdown 1s ease-in-out infinite;
box-shadow: 0px 30px 25px 0px rgba(0, 0, 0, 0.2);
max-height: 250px;
overflow-x: hidden;
}
@keyframes dropdown {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="LocationDropdown focused">
<div>
<p class="locationSelectText">London</p>
</div>
<div class="locationDropdownList">
<ul>
<li></li>
.....
.....
</ul>
<ul>
<li></li>
.....
.....
</ul>
<ul>
<li></li>
.....
.....
</ul>
</div>
</div>
关于css - CSS动画-0到100并返回0,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55608027/