JavaScript не отображает после анимации CSS3

У меня есть 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 и т.д.).

Ответы

Ответ 1

Вам нужно использовать setTimeout() с menu.style.display = "none";, чтобы позволить fade выполнить это задание до запуска 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);
}

Ответ 2

Возможно, я ошибаюсь, но считаю, что вам нужно добавить триггер перехода, который отображает: block/display: none change.

см.: События перехода CSS3

Ответ 3

Я использую высоту 0 вместо отображения нет для некоторых случаев, но может или не может применяться к тому, что вам нужно. В любом случае здесь код:

1) Использование переходов (выглядит как jQuerys fadeOut):

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

если вы хотите, вы также можете добавить ширину 0.

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

2) Использование анимаций (лучше работает, но переходы):

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

Ответ 4

Хотя это старый пост, для будущего посетителя вы можете использовать событие перехода. Вы можете использовать:

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

Ответ 5

Одна из возможностей - использовать transition-delay. Я не пробовал, но может быть достаточно:

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

а затем измените свой класс на затухание:

menu.className = 'fadeout afterFadeOut';

Это должно автоматически задерживать display: none в течение одной секунды, достаточное для того, чтобы непрозрачность исчезла.