Question

我有id ='mainmenu'的div。我在按钮点击后通过JavaScript添加CSS3过渡（通过向#mainmenu添加'transition'并创建将添加到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';
}

问题是现在我想添加display none和block to fadeout和fadein选项。所以在fadeout动画div之后应该显示none，并且在fadein显示块之后：

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

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

Answer 1

您需要将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);
}

Answer 2

我可能在这里错了，但我相信你需要添加一个执行显示的转换结束触发器：block / display：none change。

请参阅：CSS3 transition events

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

Answer 4

虽然这是一篇旧帖子，但为了将来访问者，您可以使用transitionend事件。您可以使用：

＆＃13;

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

＆＃13;

Answer 5

一种可能性是使用transition-delay。我没有尝试过，但以下内容可能就足够了：

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

然后将您的课程改为淡出为：

menu.className = 'fadeout afterFadeOut';

这应该会自动延迟display: none一秒钟，足以让不透明度逐渐消失。

CSS3动画后JavaScript不显示

5 个答案: