JAVASCRIPT - アニメーションブロックが表示されたときに消えるように

Question

ボタンをクリックすると実際によく表示されるサイドナビゲーションで助けが必要ですが、消えるように同じコードをリメイクしようとすると消えます表示されるときのように、画面の左側にゆっくりと消えていくのではなく、2番目に...ここに誰もがこれを行うために私の近い機能をスクリプト化するのを助けることができますか？

<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（表示可能）に遷移する方法が記述されていますが、アニメーションはアニメーションを表示するだけで、切り替え状態は表示されません。

javascript:void(0) in the href is wrongを置くためにHTMLを少し変更しました。 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>