Я использую "classList.toggle", чтобы показать и скрыть панель навигации путем добавления / удаления классов.Есть ли способ оживить анимацию «выхода»? - PullRequest
Новая
       37

Я использую "classList.toggle", чтобы показать и скрыть панель навигации путем добавления / удаления классов.Есть ли способ оживить анимацию «выхода»?

0 голосов
/ 05 декабря 2018

Спасибо, что заглянули.

Проблема:

Закрытие панели навигации не имеет анимации.

Как была создана анимация для открытия панели навигации:

1.Использование Javascript для переключения классов.

При каждом щелчке пользователя добавляется / удаляется класс «изменение» для значка меню и класс «расширение» для списка навигационной панели.

    (function unhideNav() {
        let mobileMenu = document.querySelector('.mobile-menu');
        let hiddenNav = document.querySelector('.mobile-menu__list');

        mobileMenu.onclick = function () {
            mobileMenu.classList.toggle('change');        
            setTimeout(() => {
                hiddenNav.classList.toggle('expand');                    
            }, 70);                  
        }
    }());

2.Использование CSS-переходов для анимации значка меню и анимации ключевых кадров для анимации списка навигационной панели.

Анимация значка меню: 

.change .mobile-menu__1 {
    transition: all .5s $cubic;
    transform: rotate(-45deg);
}

.change .mobile-menu__2 {
    transition: all .65s $cubic;
    opacity: 0;
}

.change .mobile-menu__3 {
    transition: all .5s $cubic;
    transform: rotate(45deg);
}

Анимация навигационной панели: 

&-item {
    cursor: pointer;
    color: var(--theme-grey-1);
    font-weight: 300;            
    padding-top: 1rem;  
    padding-left: 1rem;    
    padding-bottom: 1rem;          
    transition: all .1s;  

    animation-name: listItemAnimation;            
    animation-duration: .22s;
    animation-timing-function: ease-in;            
    animation-iteration-count: 1; 

    @for $i from 1 through $menuItems {
        &:nth-child(#{$i}) {             
            animation-delay: #{$i * 0.155}s;     
        }
    }
}

.expand { 
    animation-name: expandAnimation;
    animation-duration: 1.05s;
    animation-timing-function: $cubic;
    animation-iteration-count: 1;  
}

@keyframes expandAnimation {
    0% {    
        transform: translateY(-50rem);
    }

    100% {        
        transform: translateY(0rem);
    }
}

@keyframes listItemAnimation {
    0% {    
        opacity: 0;
        transform: scale(1.08) translateY(-1.55px);
    }

    100% {        
        opacity: 1;
        transform: scale(1) translateY(0px);
    }
}

Итак, когда пользователь закрывает панель навигации, JS удаляет новые классы из меню и списка панели навигации, поэтому анимация отсутствует.

Я пыталсянайти способ создать «анимацию выхода», но безрезультатно.

Моя предполагаемая «анимация выхода» (заставьте навигационную панель исчезнуть, переместив ее вверх!): 

transform: translateY(50rem);

Пожалуйста, предлагайте предложения и помощь.

Большое вам спасибо!:)

...