时间戳

首页 > 解决方案 > CSS 动画淡入/淡出问题

html - CSS 动画淡入/淡出问题

问题描述

我的 CSS 动画似乎遇到了问题，当我关闭下拉菜单时，背景会立即消失，而其余部分会消失，这会使下拉菜单看起来很奇怪，我已经尝试了所有在 CSS 动画上能找到的东西，但没有运气，所以我我想我会伸出手看看是否有人知道。

索引.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>

样式.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; }
}

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

标签： htmlcssanimation

解决方案

您好，您发布的代码似乎不完整，我猜您正在使用其他一些 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; }
}

推荐阅读