У меня есть div с id = 'mainmenu'. Я добавляю переход CSS3 к нему с помощью JavaScript после нажатия кнопки (путем добавления "перехода" в #mainmenu и создания классов .fadein и .fadeout, которые будут добавлены в элемент div). Код:
<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';
}
Проблема в том, что теперь я хочу добавить display none и заблокировать опцию fadeout и fadein. Поэтому после анимации fadeout анимация должна отображаться без отображения, а после блока отображения fadein:
btn1.addEventListener('click', function() {
menu.className = 'fadeout';
menu.style.display = 'none';
}
btn2.addEventListener('click', function() {
menu.className = 'fadein';
menu.style.display = 'block';
}
К сожалению, на экране нет ни одного кадра, а блок выполняется с анимацией, поэтому анимация не работает (элемент не отображает ни одного, без анимации непрозрачности). Сначала хочу анимацию с непрозрачностью, а после этого нет элемента/блока для элемента. Есть ли способ сделать это? Я могу использовать только чистый JavaScript (без jQuery и т.д.).