Nessuna visualizzazione JavaScript dopo animazione CSS3

Question

Ho div con id = 'mainmenu'. Sto aggiungendo la transizione CSS3 ad esso tramite JavaScript dopo il clic del mouse (aggiungendo "transizione" a #mainmenu e creando la classe .fadein e .fadeout che verrà aggiunta all'elemento div). Codice:

<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'; 
} 

Il problema è che ora voglio aggiungere visualizzazione nessuno e bloccare a FadeOut e l'opzione fadein. Così, dopo il div dissolvenza animazione dovrebbe ottenere visualizzazione nessuno, e dopo fadein blocco di visualizzazione:

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

Purtroppo, il display e nessuno blocco viene eseguito con l'animazione, per cui l'animazione non funziona (elemento ottiene visualizzazione nessuno, senza l'animazione dell'opacità). Voglio prima l'animazione con l'opacità, e dopo quella visualizzazione nessuno/blocco per l'elemento. C'è modo di farlo? Posso usare solo JavaScript puro (senza jQuery ecc.).

Answer 1

è necessario utilizzare setTimeout() con menu.style.display = "none"; al fine di lasciare dissolvenza fare il suo lavoro prima di innescare style.display.

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

Qui potrei sbagliarmi, tuttavia credo che sia necessario aggiungere un trigger di transizione che visualizza il display: block/display: nessuno cambia.

vedere: CSS3 transition events

Answer 3

Una possibilità è utilizzare transition-delay. Io non ho provato, ma quanto segue può essere sufficiente:

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

e quindi modificare la classe per la dissolvenza fuori a:

menu.className = 'fadeout afterFadeOut'; 

Questo dovrebbe ritardare automaticamente la display: none per un secondo, sufficiente per la l'opacità si è attenuata.

Answer 4

Io uso l'altezza 0 invece di visualizzare nessuno per alcuni casi, ma potrebbe essere o non essere applicabile per quello che ti serve. In ogni caso ecco il codice:

1) Utilizzo di transizioni (sembra jQuerys fadeOut):

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

se si desidera è possibile aggiungere larghezza 0 troppo.

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

2) Usare le animazioni (funziona, ma le transizioni è meglio):

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

Answer 5

Anche se questo è un vecchio post, per il bene futuro del visitatore, è possibile utilizzare l'evento transitionend. È possibile utilizzare:

/*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));