CSS3动画后JavaScript不显示答案

【问题标题】：JavaScript display none after CSS3 animationCSS3动画后JavaScript不显示
【发布时间】：2013-09-07 05:46:53
【问题描述】：

我有 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';
}

问题是现在我想添加 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';
}

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

【问题讨论】：

你能在代码中添加一个fiddle.js吗？

标签： javascript css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

有一个小问题 - 当您在 setTimeout(function(menu){}) 中有 'menu' 时，控制台显示 'Cannot read property 'style' of undefined'。从功能中删除“菜单”将解决该问题。谢谢你的帮助。
当然，第一次犹豫要不要加进去，搞错了
好奇哪个浏览器支持 .hide()/.show() - 在 chrome 中你会得到 Uncaught TypeError: Object #<HTMLDivElement> has no method 'hide'
dc5 - 在您的情况下，这可能是未包含 jQuery 库的问题，或者与另一个库发生冲突。如果您使用其他库，请尝试使用“jQuery”而不是“$”。另一种可能性是您传递了错误的对象。这里有一个例子：api.jquery.com/hide，它适用于我的 chrome。
@JevgeniBogatyrjov：问题是答案代码对 DOM 节点 ('menu.className') 和 jQuery ('menu.hide') 使用了相同的变量名 ('menu')。固定:)

【解决方案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;
  }
}

【讨论】：

哦！使用height: 0 非常聪明，因此您可以将逻辑与CSS 保持在它所属的位置。我正在使用这个！
请注意，这可能是一个可访问性问题。使用height: 0 而不是display: none 时，内容仍可用于辅助技术
我认为这是真的。考虑阅读snook.ca/archives/html_and_css/hiding-content-for-accessibility

【解决方案4】：

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

见：CSS3 transition events

【讨论】：