JavaScript ne s'affiche pas après l'animation CSS3

J'ai des div avec id='mainmenu'. Je suis en ajoutant CSS3 transition en JavaScript une fois que le bouton de la souris (par l'ajout de "transition" à #mainmenu et par la création de la classe .fadein et .fadeout qui sera ajouté à l'élément div). 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';
}

Le problème est que maintenant je veux ajouter un display none et de blocs de fadeout et fadein option. Ainsi, après la fadeout animation div devriez obtenir l'affichage aucun, et après fadein blocage d'afficheur:

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

Malheureusement, l'écran et aucun bloc s'exécute avec l'animation, de sorte que l'animation ne fonctionne pas (élément reçoit présentent aucune, sans l'opacité de l'animation). Je veux d'abord l'animation avec l'opacité, et après que l'affichage none/block pour l'élément. Est-il possible de le faire? Je peux utiliser qu'un pur JavaScript (pas de jQuery, etc.).

source d'informationauteur Amay

  1. 11

    Vous devez utiliser setTimeout() avec menu.style.display = "none"; afin de laisser fade faire c'est du boulot avant de déclencher 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. 11

    J'ai peut-être tort ici, toutefois, je crois que vous avez besoin pour ajouter une transition de fin de déclenchement qui ne le display:block /affichage:aucun changement.

    voir: CSS3 transition événements

  3. 5

    - Je utiliser la hauteur 0 au lieu d'afficher aucun pour certains cas, mais Il peut ou peut ne pas s'appliquer pour ce que vous avez besoin. De toute façon, voici le code:

    1) à l'Aide de transitions (qui ressemble à une jQuerys fadeOut):

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

    si vous le souhaitez, vous pouvez ajouter la largeur 0.

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

    2) à l'Aide d'animations (il fonctionne, mais des transitions, c'est mieux):

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

    Une possibilité est d'utiliser transition-delay. Je n'ai pas essayé, mais peuvent suffire:

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

    puis de changer de classe pour la décoloration à:

    menu.className = 'fadeout afterFadeOut';

    Qui devrait automatiquement le retard de la display: none pendant une seconde, suffisant pour l'opacité à avoir disparu vers le bas.