javascript - 打开/关闭时淡出特定的 CSS/JS 弹出窗口

Question

以下代码片段显示了我如何使用 CSS 和 JS 制作弹出窗口。有没有机会让它在打开/关闭时淡出，而不改变我以前的工作方式，我的意思是通过改变它的显示样式来弹出框？

function lightbox_open(){
    window.scrollTo(100,500);
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block'; 
}

function lightbox_close(){
    document.getElementById('light').style.display='none';
    document.getElementById('fade').style.display='none';
}

Answer 1

您可以使用 jQuery 来实现淡入淡出 $().fadeIn()，或者如果您想坚持使用纯 JS，则可以使用 CSS3 动画。在后一种情况下，默认将不透明度设置为 0，然后通过 Javascript 将其更改为 1。您需要将其添加到您的样式表中:

selector {
    opacity: 0;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}