css анимация внутри анимации не работает - PullRequest
Новая
       7

css анимация внутри анимации не работает

0 голосов
/ 15 апреля 2020

Я изучаю JavaScript и пытаюсь создать веб-сайт.

Я создал страницу с анимацией css, которая при нажатии на значок скользит на домашнюю страницу. Внутри страницы есть неупорядоченный список, и я хочу, чтобы они тоже скользили соответственно.

Когда я создал страницу, я создал функцию в addEventListner, и класс, имеющий отношение к анимации, добавляется / удаляется нажатием. и это сработало, поэтому я сделал то же самое с неупорядоченным списком, но это не сработало.

это часть моего HTML

<nav class="nav"><img class="menu-icon1" src="menu.png"></nav>
<body>

<div class="home">

    <div class="first-page-container">
    this is a main page
    </div>
    <div class="menu hidden-page">
        <nav class="nav"><img class="menu-icon2" src="menu.png"></nav>
        <div class="menu-list-wrapper">
            <ul class="menu-list">
                <li class="menu-item"><a href="#">HOME</a></li>
                <li class="menu-item"><a href="#">ABOUT</a></li>
                <li class="menu-item"><a href="#">MENU</a></li>
                <li class="menu-item"><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </div>
</div>


</body>

это мой css

.hidden-page{
    display: none;
}

.visible{
    display: block;
    animation-name: openmenubar;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.closeBar{
    animation-name: closemenubar;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes openmenubar {
    0% {opacity: 0; right: -100%}
    100% {opacity: 1; right: 0;}
}

@keyframes closemenubar {
    0% {opacity: 1; right: 0;}
    100% {opacity: 0; right: -100;}
}
/*the above animations are working*/

.visible-item1 {
    display: block;
    animation-name: listitem1;
    animation-duration:1s;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

@keyframes listitem1 {
    0% {opacity: 9; right: -1000px;}
    100% {opacity: 1; right: 0;} 
}

/*I have listitem2-3 in my code too*/

и, наконец, это мой js код 

const menuOpenBtn = document.querySelector('.menu-icon1');
const menuBar = document.querySelector('.menu');
const menuCloseBtn = document.querySelector('.menu-icon2');
const menulistItems = document.querySelectorAll('li');

const menuOpenHandler = function(){
    menuBar.classList.remove('closeBar');
    menuBar.classList.remove('hidden-page');
    menuBar.classList.add('visible');
    let i;
    for(i = 0; i < menulistItems.length; i++ ){
        menulistItems[i].classList.add(`visible-item${i + 1}`);
    };//this code adds class name but animation is not working

};

const menuCloseHandler = function(){
    menuBar.classList.add('closeBar');
    menuBar.classList.remove('visible');
    let i;
    for(i = 0; i < menulistItems.length; i++ ){
        menulistItems[i].classList.remove(`visible-item${i + 1}`);
    };//this code adds class name but animation is not working
    setTimeout(()=>{menuBar.classList.add('hidden-page');}, 1000);
};

menuOpenBtn.addEventListener('click', menuOpenHandler);
menuCloseBtn.addEventListener('click', menuCloseHandler);

Я очень признателен, если вы ответите с ванилью JavaScript. Большое вам спасибо:)

...