JavaScript display none after CSS3 animation

Question

I have div with id='mainmenu'. I'm adding CSS3 transition to it by JavaScript after button click (by adding 'transition' to #mainmenu and by creating class .fadein and .fadeout that will be added to the div element). Code:

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

The problem is that now I want to add display none and block to fadeout and fadein option. So after the fadeout animation div should get display none, and after fadein display block:

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

Unfortunately, the display none and block executes with the animation, so the animation isn't working (element gets display none, without the opacity animation). I want first the animation with opacity, and after that display none/block for the element. Is there any way to do it? I can use only pure JavaScript (no jQuery etc.).

Answer 1

You need to use setTimeout() with menu.style.display = "none"; in order to let fade do it's job before you trigger 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); }