点击页面链接时先隐藏map类图片并暗化屏幕再跳转的实现咨询

嘿，这个需求我刚好有过类似的实现经验，用preventDefault()配合CSS过渡完全能搞定！我给你整理了一套完整的可运行方案，你可以直接参考调整：

HTML 结构 #

首先我们需要基础的页面结构，包含带map类的图片、用于过渡的黑色背景层，以及测试用的链接：

<!-- 带map类的目标图片 -->
<img src="your-image-path.jpg" class="map" alt="Map Image">
<!-- 黑色过渡背景层，初始状态隐藏 -->
<div class="black-overlay"></div>
<!-- 页面中的任意链接 -->
<a href="https://your-target-page.com">跳转至页面A</a>
<a href="https://your-target-page.com/page2">跳转至页面B</a>

CSS 样式 #

接下来是关键的过渡样式，我们需要给图片和背景层设置过渡动画，确保隐藏/显示的过程平滑：

/* 初始状态的map图片 */
.map {
  /* 统一过渡属性和时长，和后续隐藏类保持一致 */
  transition: visibility 0.3s linear, opacity 0.3s linear;
  visibility: visible;
  opacity: 1;
}

/* 图片隐藏的状态类 */
.map.hideImg {
  opacity: 0;
  visibility: hidden;
}

/* 黑色背景层的初始状态 */
.black-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  /* 和图片过渡时长保持同步 */
  transition: visibility 0.3s linear, opacity 0.3s linear;
  z-index: 999; /* 确保背景层在图片上方 */
}

/* 背景层显示的状态类 */
.black-overlay.show {
  opacity: 1;
  visibility: visible;
}

JavaScript 逻辑 #

最后通过JS监听链接点击事件，阻止默认跳转，触发过渡动画，等动画完成后再执行跳转：

// 获取页面中所有的链接
const allLinks = document.querySelectorAll('a');
// 获取目标图片和背景层元素
const mapImage = document.querySelector('.map');
const blackOverlay = document.querySelector('.black-overlay');

// 给每个链接绑定点击事件
allLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 先阻止默认的跳转行为
    e.preventDefault();
    // 保存目标链接地址，避免后续this指向变化
    const targetUrl = this.href;

    // 给图片添加隐藏类，背景层添加显示类，触发过渡动画
    mapImage.classList.add('hideImg');
    blackOverlay.classList.add('show');

    // 等待过渡动画完成（时长和CSS中设置的0.3s一致，即300ms）
    setTimeout(() => {
      // 执行页面跳转
      window.location.href = targetUrl;
    }, 300);
  });
});

一些注意事项 #

• 确保CSS中的过渡时长和JS里setTimeout的时间完全一致，这样跳转时机刚好在动画结束后，避免突兀感；
• 如果页面中有多个带map类的图片，把querySelector('.map')改成querySelectorAll('.map')，然后循环给每个图片添加hideImg类；
• 黑色背景层用fixed定位可以确保它始终覆盖整个视口，不会因为页面滚动出现缝隙；
• 调整z-index值，确保背景层不会被其他页面元素遮挡。

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