JAVASCRIPT - Анимать блок, чтобы исчезнуть, как если бы он появился, когда он появился

Question

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

<nav class="w3-sidenav w3-dark-grey w3-card-2 w3-animate-left" style="display:none;z-index:2"> 
     <a href="javascript:void(0)" 
     onclick="w3_close()" 
     class="w3-closenav w3-jumbo w3-text-teal">&times;</a> 
     <a href="javascript:void(0)">Link 1</a>  
     <a href="javascript:void(0)">Link 2</a>  
     <a href="javascript:void(0)">Link 3</a>  
     <a href="javascript:void(0)">Link 4</a>  
     <a href="javascript:void(0)">Link 5</a>  
    </nav> 

.w3-animate-left{ 
position:relative;-webkit-animation-name:animateleft;-webkit-animation-duration:0.6s;animation-name:animateleft;animation-duration:0.6s} 
@-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} 
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} 

    <script> 
function w3_open() { 
    document.getElementsByClassName("w3-sidenav")[0].style.width = "300px"; 
    document.getElementsByClassName("w3-sidenav")[0].style.textAlign = "center"; 
    document.getElementsByClassName("w3-sidenav")[0].style.fontSize = "40px"; 
    document.getElementsByClassName("w3-sidenav")[0].style.paddingTop = "10%"; 
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block"; 
} 
function w3_close() { 
    document.getElementsByClassName("w3-sidenav")[0].style.width = "0px"; 
    document.getElementsByClassName("w3-sidenav")[0].style.textAlign = "center"; 
    document.getElementsByClassName("w3-sidenav")[0].style.fontSize = "40px"; 
    document.getElementsByClassName("w3-sidenav")[0].style.paddingTop = "0%"; 
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";  
} 
</script> 

Answer 1

Самым простым решением здесь является использование CSS transitions и не CSS animations. Как следует из названий, переход описывает, как перейти из состояния A (скрытый) в состояние B (видимый), анимация - это просто показать анимацию, но не для состояний переключения.

Я также немного изменил ваш HTML, потому что положить javascript:void(0) in the href is wrong. См. this codepen Я сделал несколько дней назад для альтернативных решений.

onclick attribute is also a bad idea, поэтому я добавил слушателя событий в JS.

(function(){ 
 
    "use strict"; 
 

 
    var nav = document.querySelector('.w3-sidenav'); 
 
    function toggleNav(){ 
 
    if(nav.className.indexOf('hidden') > -1){ 
 
     nav.className = nav.className.replace(' hidden', ''); 
 
    } 
 
    else { 
 
     nav.className += ' hidden' 
 
    } 
 
    } 
 

 

 
    document 
 
    .querySelector('.w3-closenav') 
 
    .addEventListener("click", function(e){ 
 
    e.preventDefault(); 
 
    toggleNav() 
 
    }) 
 

 
    document 
 
    .querySelector('.toggleNav') 
 
    .addEventListener("click", function(e){ 
 
    e.preventDefault(); 
 
    toggleNav() 
 
    }) 
 

 
})()

/** 
 
*The visible state 
 
*/ 
 
.w3-animate-left { 
 
    position: relative; 
 

 
    left: 0; 
 
    opacity: 1; 
 

 
    transition-property: left, opacity; 
 
    transition-duration: 0.6s; 
 
} 
 

 
/** 
 
* The hiden state 
 
*/ 
 
.w3-animate-left.hidden{ 
 
    left: -300px; 
 
    opacity: 0; 
 
}

<!-- I added a link to toggle the navigation --> 
 
<a href="#!" class="toggleNav">Toggle Navigation</a> 
 
<nav class="w3-sidenav w3-dark-grey w3-card-2 w3-animate-left hidden" style="z-index:2"> 
 
    <a href="#!" class="w3-closenav w3-jumbo w3-text-teal">&times;</a> 
 
    <a href="#!">Link 1</a> 
 
    <a href="#!">Link 2</a> 
 
    <a href="#!">Link 3</a> 
 
    <a href="#!">Link 4</a> 
 
    <a href="#!">Link 5</a> 
 
</nav>