CSS CSS3 动画后 JavaScript 不显示

JavaScript display none after CSS3 animation

提问by Amay

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:

我有 id='mainmenu' 的 div。我在单击按钮后通过 JavaScript 向其添加 CSS3 过渡（通过将“过渡”添加到 #mainmenu 并创建将添加到 div 元素的类 .fadein 和 .fadeout）。代码：

<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:

问题是现在我想添加 display none 和 block 到淡出和淡入选项。所以在淡出动画 div 之后应该没有显示，并且在淡入显示块之后：

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

不幸的是， display none 和 block 与动画一起执行，因此动画不起作用（元素获得 display none，没有不透明动画）。我首先想要不透明的动画，然后显示元素的无/块。有什么办法吗？我只能使用纯 JavaScript（没有 jQuery 等）。

采纳答案by bogatyrjov

You need to use setTimeout()with menu.style.display = "none";in order to let fade do it's job before you trigger style.display.

您需要使用setTimeout()withmenu.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);
}

回答by Robert

I could be wrong here, however i believe you need to add a transition-end trigger that does the display:block / display:none change.

我在这里可能是错的，但是我相信您需要添加一个过渡结束触发器来执行 display:block / display:none 更改。

see: CSS3 transition events

请参阅：CSS3 过渡事件

回答by Darrennchan8

Although this is an old post, for future visitor's sake, you can use the transitionend event. You can use:

尽管这是一篇旧帖子，但为了将来的访问者，您可以使用 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));

回答by Erick A. Monta?ez

I use height 0 instead of display none for some cases but It may or may not apply for what you need. Anyway here's the code:

在某些情况下，我使用高度 0 而不是显示 none，但它可能适用也可能不适用于您的需要。无论如何这里的代码：

1) Using transitions (looks like jQuerys fadeOut):

1）使用过渡（看起来像jQuery的fadeOut）：

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

if you want you can add width 0 too.

如果你愿意，你也可以添加宽度 0。

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

2) Using animations (it works but transitions is better):

2）使用动画（它有效但过渡更好）：

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