JavaScript display none after CSS3 animation

Refresh

November 2018

Views

29.9k time

14

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.).

5 answers

11

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

см: CSS3 переходные события

5

Несмотря на то, что это старый пост, ради будущего посетителя, вы можете использовать событие transitionend. Ты можешь использовать:

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

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

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

а затем изменить свой класс для увядающей, чтобы:

menu.className = 'fadeout afterFadeOut';

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

11

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

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

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

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