抽屉菜单上的关闭效果损坏答案

【问题标题】：Broken Closing Effect on Drawer Menu抽屉菜单上的关闭效果损坏
【发布时间】：2021-02-17 10:12:55
【问题描述】：

我的下拉菜单有问题。

我想从右到左打开该下拉菜单，然后从左到右以全高关闭它。

问题是，动画在它打开的时候就起作用了。但它在关闭时不起作用。抽屉式菜单正在关闭任何效果或动画。

另一个奇怪的事情是，当我从浏览器检查代码时，如果我切换“动画：transform-display .2s;”上的勾号，打开和关闭动画工作正常。

但是，如果我从切换抽屉菜单的 .cls parton 浏览器切换“显示”类，则关闭动画不起作用。

我可以得到帮助吗？

这是 HTML 部分。

 <div class="nav-first-right ml-auto navbar-icon-top navbar-expand-lg ">
        <ul class="navbar-nav  align-items-center ml-auto nav-first-ul">
                <li class="nav-item dropdown no-arrow no-caret dropdown-user user-menu-li">
                    <button class="btn btn-icon btn-transparent-dark dropdown-toggle" id="navbarDropdownUserImage"
                            href="javascript:void(0);" role="button" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false"><img class="img-fluid" src="{{ user().profilePhoto }}"></button>
                    <div class="dropdown-menu dropdown-menu-right border-0 shadow"
                         aria-labelledby="navbarDropdownUserImage">

这是 CSS 部分。

    .nav-item .dropdown-menu {
    box-shadow: 5px 0px 2px 5px rgb(0 0 0 / 75%) !important;
    position: fixed;
    top: 0;
    /*left: 0;*/
    right: 0;
    min-height: 100%;
    width: 120px;
    margin: 0;
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    
}

.nav-item .dropdown-menu.show { 
display: block;
    animation: transform-display .2s;
    animation-fill-mode:forwards;
    animation-delay: 0ms;
    animation-timing-function: linear;
} 

.osahan-nav-top .nav-item .dropdown-menu:not(show) {

    animation: transform-display--reversed .2s;
    animation-fill-mode:forwards;
    animation-delay: 0ms;
    animation-timing-function: linear
}

@keyframes transform-display {
    0% {
        opacity: 0;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
}

@keyframes transform-display--reversed {
    0% {
        display: block;
        opacity: 1;
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
    99% {
        display: block;
        opacity: 1;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        display: none;
        opacity: 0;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
}

【问题讨论】：

标签： javascript css twitter-bootstrap-3 jquery-animate css-animations

【解决方案1】：

即使没有关键帧，您也可以通过过渡来制作此动画。只是假设转换之前和之后的场景。

.dropdown-menu{
    opacity: 0;
    transform: translateX(100%);
    visibility: hidden;
    display: block;
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
}
.dropdown-menu.show{
    transform: translateX(0);
    visibility: visible;
    opacity:1;
}

【讨论】：