JavaScript ekranı CSS3 sonrası animasyon yok

Question

Id = 'mainmenu' ile div'um var. Düğme tıklattıktan sonra JavaScript ile CSS3 geçişine ekliyorum (#mainmenu'ya 'geçiş' ekleyerek ve div öğesine eklenecek sınıf .fadein ve .fadeout oluşturarak). Kod:

<div id='mainmenu'></div> 
<button id="btn1">Click me1</button> 
<button id="btn2">Click me2</button> 

#mainmenu { 
    width:100px; 
    height:100px; 
    background:#eee; 
    -webkit-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    transition: opacity 1s; 
} 

.fadeout { 
    opacity:0; 
} 
.fadein { 
    opacity:1; 
} 


var menu = document.getElementById('mainmenu'), 
    btn1 = document.getElementById('btn1'), 
    btn2 = document.getElementById('btn2'); 

btn1.addEventListener('click', function() { 
    menu.className = 'fadeout'; 
} 
btn2.addEventListener('click', function() { 
    menu.className = 'fadein'; 
} 

Sorun şu ki, hiç görüntü eklemek istemiyorum ve fadeout ve fadein seçeneğine engelle. kısılması animasyon div ve görüntü bloğu fadein sonra ekran hiçbiri almalısınız Yani sonra:

btn1.addEventListener('click', function() { 
    menu.className = 'fadeout'; 
    menu.style.display = 'none'; 
} 
btn2.addEventListener('click', function() { 
    menu.className = 'fadein'; 
    menu.style.display = 'block'; 
} 

Ne yazık ki ekran hiçbiri ve blok animasyon ile yürütür, böylece animasyon çalışmıyor (eleman olmadan, ekran hiçbiri alır opaklık animasyonu). Öncelikle, animasyonun opaklıkla olmasını istiyorum ve bundan sonra, eleman için hiç bir engel yok. Bunu yapmanın bir yolu var mı? Sadece saf JavaScript'i kullanabilirim (jQuery vb. Yok).

Answer 1

Sen soldurma izin için menu.style.display = "none"; ile setTimeout() kullanmak gerekir Eğer style.display tetiklemek önce bu kadar iş yapmak.

btn1.addEventListener('click', function() { 
    menu.className = 'fadeout'; 
    setTimeout(function() { 
     $(menu).css('display', 'none'); 
    }, 1000); 
} 
btn2.addEventListener('click', function() { 
    menu.className = 'fadein'; 
    setTimeout(function() { 
     $(menu).css('display', 'block'); 
    }, 1000); 
} 

Answer 2

Burada yanlış olabilirim, ancak ekrana gelen bir geçiş sonu tetikleyicisi eklemeniz gerektiğine inanıyorum: block/display: none change.

bkz: CSS3 transition events

Answer 3

transition-delay. Ben hiç denemedim, ama şu yeterli olabilir:

menu.className = 'fadeout afterFadeOut'; 

otomatik olarak display: none bir saniye yeterli ertelemesi gerektiğini That:

.fadeout { 
    opacity:0; 
} 
.fadein { 
    opacity:1; 
    display: block; 
} 
.afterFadeOut { 
    transition-delay: 1s; 
    display: none; 
} 

ve sonra dışarı solma için sınıf değiştirme opaklık solmuş.

Answer 4

Bazı durumlarda görüntüleme yok yerine yükseklik 0 kullanıyorum ancak ihtiyacınız olan şey için geçerli olabilir veya olmayabilir. Eğer 0 çok genişlik ekleyebilir isterseniz

.fadeOut{ 
    opacity : 0; 
    height : 0; 
    transition : opacity 800ms, height 0 800ms; 
} 

:

1) geçişlerini Kullanma (jQuerys Fadeout benziyor): Neyse burada kod.

.fadeOut{ 
    opacity : 0; 
    width : 0; 
    height : 0; 
    transition : opacity 800ms, height 0 800ms, width 0 800ms; 
} 

2) kullanarak animasyonlar (Çalışır ancak geçişler iyidir):

.fadeOut{ 
    animation : fadeout 800ms linear forwards; 
} 
@keyframes fadeout{ 
    99%{ 
    opacity : 0; 
    height : initial; 
    } 
    100%{ 
    opacity : 0; 
    height : 0; 
    } 
} 

Answer 5

bu gelecek ziyaretçinin uğruna eski bir yazı, olsa da, transitionend olayını kullanabilirsiniz. Sen kullanabilirsiniz:

/*For when object has fully faded*/ 
 
menu.addEventListener("transitionend", function() { 
 
    if (this.className == "fadeout") { 
 
    this.style.display = "none"; 
 
    } 
 
}.bind(menu)); 
 

 
/*Show before animation starts*/ 
 
menu.addEventListener("click", function() { 
 
    this.style.display = "block"; 
 
}.bind(menu));