javascript - javascript和CSS弹出窗口淡出动画

我正在弹出一条消息，当它设置为style.display = "block";（通过按一个按钮）时，它将消失为不可见。我在弹出窗口上有一个按钮，可通过设置style.display = "none";来隐藏弹出窗口，如何使其淡出？

这是CSS

#note {
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}
@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}
.cssanimations.csstransforms #note {
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}
.cssanimations.csstransforms #close {
    display: none;
}

这是JavaScript

<script>
    close = document.getElementById("close");
    close.addEventListener('click', function() {
        note = document.getElementById("note");
        note.style.display = 'none';
    }, false);
</script>

这是HTML

<div id="note" style="display: none;">
    Form has been sent. If you would like to fill out another suggestion, feel free but remember that there is an Anti-spam system running. <a id="close">[close]</a>
</div>

最佳答案

使用jQuery，因为它要简单得多，可从此处Click Here下载。
包括jquery.js并在<script>标记中编写代码。

为了显示弹出窗口的使用，

$("#btn_id").click(function(e){
    $('#note').fadeIn();
});

为了隐藏弹出窗口的使用，

$("#close").click(function(e){
    $('#note').fadeOut();
});

关于javascript - javascript和CSS弹出窗口淡出动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24423311/