реверс КАС анимации

Question

У меня есть накладка, которая выцветает со следующим кодом,

.overlay { 
    background: rgba(32, 79, 156, 0.97); 
    width: 100%; 
    height: 100vh; 
    position: fixed; 
    z-index: 1000; 
    display: none; 


} 

.overlay.active { 
    display: block; 
    -webkit-animation-duration: 0.5s; 
    -webkit-animation-name: fadeIn; 
    animation-duration: 0.5s; 
    animation-name: fadeIn; 
} 





@keyframes fadeIn { 
    0% { 
     display:none; 
     opacity: 0; 
    } 

    1% { 
     display: block ; 
     opacity: 0; 
    } 

    100% { 
     display: block ; 
     opacity: 1; 
    } 
} 

всех моих JS делает это переключение класса

$('.hamburger').on('click', function(){ 
     $('.overlay, .hamburger').toggleClass('active'); 
    }); 

Как я могу изменить эту анимацию? на данный момент он просто переходит в предыдущее состояние.

Answer 1

Анимация не будет работать на свойстве display, так как display:none скрывает элемент, чтобы вы не увидели, что он исчезает, даже если анимация запущена. Вы можете просто оживить opacity свойства, используя CSS Transitions так:

$('.hamburger').on('click', function(){ 
 
     $('.overlay, .hamburger').toggleClass('active'); 
 
    });

.overlay { 
 
    background: rgba(32, 79, 156, 0.97); 
 
    width: 100%; 
 
    height: 100vh; 
 
    position: fixed; 
 
    z-index: 1000; 
 
    opacity:0; 
 
    pointer-events:none; 
 
    -webkit-transition: scale, opacity 0.5s ease; 
 
    -moz-transition: scale, opacity 0.5s ease; 
 
    -o-transition: scale, opacity 0.5s ease; 
 
    transition: scale, opacity 0.5s ease; 
 
} 
 

 
.overlay.active { 
 
    opacity:1; 
 
    pointer-events:auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hamburger">hamburger</div> 
 
<div class="overlay">overlay</div>

Answer 2

Вашей кнопка Toogle спрятаться, так как наложение перекрывает кнопки, попробуйте поставить кнопку с более высоким Z-индексом выше накладки. С анимацией вы можете использовать opacity и transition

CSS

.hamburger{ 
    position: relative; 
    z-index: 1001; 
} 

.hamburger.active{ 
    color: #fff; 
    transition: all 0.6s ease; 
} 

.overlay { 
    background: rgba(32, 79, 156, 0.97); 
    width: 100%; 
    height: 100vh; 
    position: fixed; 
    z-index: 1000; 
    opacity:0; 
    transition: all 0.5s ease;  
} 

.overlay.active { 
    display: block; 
    transition: all 0.5s ease; 
    opacity:1; 
} 

DEMO HERE