反向动画不适用于 javascript 和关键帧

Question

我正在尝试为导航叠加层设置动画，使其从右侧进入（效果很好！），但是当我尝试反转该过程时它不起作用。我想知道为什么。请查看下面的代码，看看您是否可以帮助我。

HTML

<nav class="nav-element">
    <h1>header</h1>
    <figure class="nav-img">
        <img src="images/svg/menu.svg" alt="Hamburger Menu" id="nav-open">
    </figure>
</nav>

<section id="overlay" class="overlay">
    <header>
        <h1>Header</h1>
        <figure class="nav-img">
            <img src="images/svg/menu-close.svg" alt="Close Menu" id="nav-close">
        </figure>
    </header>

    <ul>
        <li class="nav-button"><a href="#">item 1</a></li>
        <li class="nav-button"><a href="#">item 2</a></li>
        <li class="nav-button"><a href="#">item 3</a></li>
        <li class="nav-button"><a href="#">item 4</a></li>
    </ul>
</section>

SCSS

.show-menu {
    display: block;
    animation: slide-menu 0.5s ease-in forwards;

    header {
        animation: show-x 1s 0.5s forwards;
    }

    li:nth-of-type(1) {
        animation: item-1 0.5s 0.5s linear forwards;
    }

    li:nth-of-type(2) {
        animation: item-1 0.5s 0.7s linear forwards;
    }

    li:nth-of-type(3) {
        animation: item-1 0.5s 0.9s linear forwards;
    }

    li:nth-of-type(4) {
        animation: item-1 0.5s 1.1s linear forwards;
    }
}

.hide-menu {
    display: block;
    animation: slide-menu 0.5s 1.1s ease-in forwards;

    header {
        animation: hide-x 1s 0.5s forwards;
    }

    li:nth-of-type(1) {
        animation: item-hide 0.5s linear forwards;
    }

    li:nth-of-type(2) {
        animation: item-hide 0.5s 0.9s linear forwards;
    }

    li:nth-of-type(3) {
        animation: item-hide 0.5s 0.7s linear forwards;
    }

    li:nth-of-type(4) {
        animation: item-hide 0.5s 0.5s linear forwards;
    }
}

@keyframes slide-menu {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes show-x {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes item-1 {
    from {
        transform: translateX(10%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes hide-menu {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

@keyframes hide-x {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes item-hide {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(10%);
        opacity: 0;
    }
}

Javascript

const overlay = document.getElementById('overlay');

document.getElementById('nav-open').addEventListener('click', function() {
    overlay.classList.add('show-menu');
})

document.getElementById('nav-close').addEventListener('click', function() {
    overlay.classList.add('hide-menu');
    overlay.classList.remove('show-menu');
})

谁能帮助我为什么动画没有“反转”并且菜单关闭方式与打开方式相同？ 所以首先项目在 X 轴上移动并消失，然后标题内容消失，最后叠加层从 X 轴上移动并消失。

Answer 1

为 .hide-menu 试试这个 CSS，添加 reverse 属性将在单击隐藏按钮时反转动画：

.hide-menu {
   display: block;
   animation: slide-menu 0.5s 1.1s ease-in reverse;

   header {
       animation: hide-x 1s 0.5s reverse;
   }

   li:nth-of-type(1) {
       animation: item-hide 0.5s linear reverse;
   }

   li:nth-of-type(2) {
       animation: item-hide 0.5s 0.9s linear reverse;
   }

   li:nth-of-type(3) {
       animation: item-hide 0.5s 0.7s linear reverse;
   }

   li:nth-of-type(4) {
       animation: item-hide 0.5s 0.5s linear reverse;
   }

}

这是JSFiddle Example