css - JavaScript display none after CSS3 animation -

i have div id='mainmenu'. i'm adding css3 transition javascript after button click (by adding 'transition' #mainmenu , creating class .fadein , .fadeout added 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 want add display none , block fadeout , fadein option. after fadeout animation div should display none, , 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, display none , block executes animation, animation isn't working (element gets display none, without opacity animation). want first animation opacity, , after display none/block element. there way it? can use pure javascript (no jquery etc.).

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