Question

我正在制作一条弹出消息，当它设置为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>

Answer 1

使用 jQuery ，因为它更简单，下载来自Click Here。包括 jquery.js ＆amp;用<script>标签编写代码。

要显示弹出窗口，

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

隐藏弹出式使用，

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

Answer 2

CSS显示属性没有“隐藏”值（您可能输错了）。你应该把它设置为'无'。然后，您应该为css中的#note指定显示属性的转换，例如

#note {
    display: block;
    -webkit-transition: display 2s; /* For Safari 3.1 to 6.0 and don't forget other browsers */
    transition: display 2s;
}

然后，在JS中，所有必须做的只是将display属性设置为'none'：

document.getElementById("close").onclick(function () {
    document.getElementById('note').style.display = 'none';
});

如果使用CSS过渡，则应检查浏览器兼容性列表。作为可能的解决方法，您可以尝试CSS可见性属性（'visible'到'hidden'）。

但这是错误的道路，因为显示和隐藏不会让你顺利消失。尝试opacity属性，然后在转换完成时通过将display设置为none来隐藏弹出窗口。

你可以使用jQuery或纯JS，但它比CSS转换要慢得多。我会严格推荐使用CSS。另一方面，CSS转换的浏览器兼容性较差，因此如果符合浏览器兼容性要求，则应使用它。

javascript和css弹出淡出动画

2 个答案: