如何结合CSS与JS实现点击淡出到黑、页面加载从黑淡入效果？

实现逻辑：点击按钮时先阻止默认跳转，等遮罩层完全变黑后再跳转页面；新页面加载时先让遮罩层保持全黑，页面加载完成后再让遮罩层慢慢消失，即可实现两个效果的顺序衔接。

1. 修正CSS代码 #

整合原有两份CSS并调整错误逻辑：

/* 全局遮罩层基础样式 */
#overlay {
    position: fixed; /* 固定定位覆盖整个视口 */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9999; /* 层级最高，覆盖所有页面元素 */
    transition: opacity 0.5s ease; /* 过渡动画时长可自行调整 */
    opacity: 0; /* 默认透明 */
    pointer-events: none; /* 透明状态下不阻挡页面点击操作 */
}

/* 点击按钮后添加的类，让遮罩层变为全黑 */
#overlay.backdrop {
    opacity: 1;
    pointer-events: all;
}

/* 页面初始加载状态：遮罩层默认全黑 */
body.loading #overlay {
    opacity: 1;
}

2. 调整JS代码逻辑 #

修改点击事件规则，控制跳转时机：

$(document).ready(function() {
    // 页面加载完成后移除body的loading类，触发遮罩层淡出，实现从黑淡入页面的效果
    $('body').removeClass('loading');

    // 按钮点击事件
    $('[data-toggle="active"]').click(function(e) {
        e.preventDefault(); // 先阻止默认跳转行为
        const targetUrl = $(this).attr('href'); // 获取要跳转的目标链接
        $('#overlay').addClass('backdrop'); // 触发遮罩层淡入到全黑的动画
        
        // 等遮罩层动画完成后再跳转，延迟时长和CSS里的过渡时长保持一致
        setTimeout(function() {
            window.location.href = targetUrl;
        }, 500);
    });
});

3. 调整HTML结构 #

给body添加初始loading类，保证页面刚打开时遮罩层为全黑状态：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="loading">
    <a class="btn btn-default" data-toggle="active" href="nextpage.com">按钮1</a>
    <a class="btn btn-default" data-toggle="active" href="nextpage2.com">按钮2</a>
    <div id="overlay"></div>
</body>

注意事项 #

所有需要实现淡入淡出效果的页面都需要统一添加上述CSS、JS和HTML结构即可生效，可根据需求自行调整过渡动画的时长。

内容的提问来源于stack exchange，提问作者Joris