CSS动画淡入淡出问题

Question

我的CSS动画似乎遇到了一个问题，当我关闭Dropdown时，背景会立即消失，而其他的则会消失，这会让下拉列表看起来很奇怪，我已经尝试了在CSS动画上能找到的一切，但都没有成功，所以我想我应该联系一下是否有人知道。

index.html

<li class="menu-item-3 dropdown">
<a>Info for volunteers</a>
<ul class="child">
<li>
<a href="<?php echo $root; ?>volunteers/your-roles/">
<div class="bold">Your roles</div>
<div class="sub">Your current roles and support</div>
</a>
</li>
<li>
<a href="<?php echo $root; ?>volunteers/news/">
<div class="bold">News</div>
<div class="sub">News for members</div>
</a>
</li>
<li>
<a href="<?php echo $root; ?>volunteers/information/">
<div class="bold">Information</div>
<div class="sub">Useful downloads and pages</div>
</a>
</li>
</ul>
</li>

style.css

.header .nav_container .desktop ul li ul.child {
display: block;
position: absolute;
top: calc( 100% + 30px );
z-index: 900;
background-color: #fff;
right: -10px;
min-width: 200px;
margin: 0;
overflow: hidden;
border: none;
padding: 0 32px;
box-shadow: 2px 2px 0 0 rgba(77, 77, 77, 0.3);
opacity: 0;
visibility: hidden;
animation: fadeout 0.3s;
}
.header .nav_container .desktop ul li ul.child.open {
opacity: 1;
visibility: visible;
animation: fadein 0.3s;
}
@keyframes fadein {
from { opacity: 0;margin-top: 40px; }
to   { opacity: 1;margin-top: 0px; }
}
@keyframes fadeout {
from { opacity: 1;margin-top: 0px; }
to   { opacity: 0;margin-top: 40px; }
}

任何想法都将不胜感激。提前感谢您花时间阅读本文。

Answer 1

您好，您发布的代码似乎不完整，我猜您正在使用其他一些CSS库，不过，据我所知，您希望实现以下目标。

编辑：可见性：应从.header.nav_container.desktop ul li ul.child选择器中删除隐藏属性

.header .nav_container .desktop ul li ul.child {
display: block;
position: absolute;
top: calc( 100% + 30px );
z-index: 900;
background-color: #fff;
right: -10px;
min-width: 200px;
margin: 0;
overflow: hidden;
border: none;
padding: 0 32px;
box-shadow: 2px 2px 0 0 rgba(77, 77, 77, 0.3);
opacity: 0;
animation: fadeout 0.3s;
}
.header .nav_container .desktop ul li ul.child.open {
opacity: 1;
visibility: visible;
animation: fadein 0.3s;
}
@keyframes fadein {
from { opacity: 0;margin-top: 40px; }
to   { opacity: 1;margin-top: 0px; }
}
@keyframes fadeout {
from { opacity: 1;margin-top: 0px; }
to   { opacity: 0;margin-top: 40px; }
}