JAVASCRIPT - Görünüşte göründüğü gibi yok olma bloğu

Question

Bir düğmeyi tıklattığımda gerçekten güzel görünen yan gezintimle ilgili yardıma ihtiyacım var, ancak aynı kodu yeniden gözden geçirmeyi denediğimde yalnızca kayboluyor Ekranın sol tarafında yavaşça kaybolmak yerine bir saniye içinde ... Buradaki herkes, bunu yapmak için yakın işlevimi komut yazmamda bana yardımcı olabilir mi?

<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

burada en kolay çözüm CSS transitions değil CSS animations kullanmaktır. İsimlerden de anlaşılacağı gibi, geçiş A durumundan (gizli) durum B'ye (görünür) geçişin nasıl açıklanacağını açıklamaktadır, animasyon sadece bir animasyon göstermektir ancak durumları değiştirmek için değildir.

Ayrıca, HTML'yi biraz değiştirdim çünkü javascript:void(0) in the href is wrong. this codepen'a bakın Alternatif çözümler için birkaç gün önce yaptım.

onclick attribute is also a bad idea, bu yüzden JS'de bir olay dinleyicisi ekledim.

(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>