javascript - 关闭 Div - 淡出？

Question

我的页面顶部有一个 div，里面有一个关闭按钮，单击该按钮会使 div 消失，这就是我想要的，但是我想让 div 淡出，而不是只是去“POOF”，它立即消失了。我该怎么做？

当前代码:

<div class="topimage">
    <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'></span>
</div>

顶部图像是消失的 div，跨度是关闭按钮。

我已经尝试在其中添加 .fadeout()，但是没有用 - 或者我没有将其添加到正确的位置，这可能就是这种情况。

Answer 1

其他人建议使用 jQuery，但是您似乎没有使用 jQuery，没有它也可以完成。

首先我建议不要使用 onclick 属性。将 JavaScript 保存在 javascript 文件中，将 HTML 保存在 HTML 文件中。请参阅:http://en.wikipedia.org/wiki/Separation_of_concerns

现在的解决方案是在“topimage”div 上为不透明度设置一个 CSS3 过渡，然后在单击时对其应用一个类，将其不透明度设置为 0。这将创建淡出效果。然后您可以设置超时以从页面中删除 div。确保此超时长度与 CSS3 过渡时间匹配。

HTML:

<div class="topimage">
    <span id='close'>x</span>
</div>

CSS:

.topimage{
    transition: opacity 500ms;
}
.topimage.fadeOut{
    opacity: 0;
}

JS:

var close = document.querySelector("#close");

close.addEventListener('click', function(){
    var parent = this.parentNode;
    parent.classList.add('fadeOut');
    setTimeout(function(){
        parent.remove();
    }, 500);
});

http://jsfiddle.net/swoogie/rcpjnj3f/