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

尝试使用此CSS作为.hide菜单，添加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

反向动画无法与javascript和关键帧一起正常使用

1 个答案: