如何实现点击按钮后先执行遮罩动画再延迟跳转至其他站点？

核心思路可行性确认 #

你考虑的「CSS动画实现视觉效果 + JS控制重定向时机」完全可行，这是这类交互需求的标准实现方式，既能保证动画流畅性，又能精准确保动画完成后再跳转。

具体实现步骤 #

1. HTML基础结构 #

先搭建按钮组和全屏覆盖层的结构：

<!-- 右侧垂直按钮组 -->
<div class="button-group">
  <button class="btn btn-red" data-target-url="https://example.com/red">红色按钮</button>
  <button class="btn btn-green" data-target-url="https://example.com/green">绿色按钮</button>
  <button class="btn btn-blue" data-target-url="https://example.com/blue">蓝色按钮</button>
</div>

<!-- 全屏覆盖层（初始隐藏） -->
<div class="fullscreen-overlay" id="slide-overlay"></div>

2. CSS滑入动画定义 #

用CSS过渡动画实现覆盖层从右侧滑入的效果，同时设置初始状态：

/* 覆盖层初始状态：右侧隐藏，全屏尺寸 */
.fullscreen-overlay {
  position: fixed;
  top: 0;
  right: -100vw;
  width: 100vw;
  height: 100vh;
  transition: right 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* 动画时长和曲线可自定义 */
  z-index: 9999;
}

/* 滑入后的激活状态 */
.fullscreen-overlay.active {
  right: 0;
}

/* 按钮组样式示例 */
.button-group {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn {
  padding: 14px 22px;
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}

.btn-red { background-color: #ff3b30; }
.btn-green { background-color: #34c759; }
.btn-blue { background-color: #007aff; }

3. JS交互逻辑（关键：监听动画完成） #

不要用固定延迟，而是监听CSS过渡完成事件，确保动画结束后再重定向：

const overlay = document.getElementById('slide-overlay');
const buttons = document.querySelectorAll('.btn');

buttons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 同步覆盖层与按钮的颜色
    overlay.style.backgroundColor = getComputedStyle(this).backgroundColor;
    // 触发滑入动画
    overlay.classList.add('active');
    
    // 监听过渡完成事件，仅触发一次
    overlay.addEventListener('transitionend', function handleTransitionEnd() {
      // 移除监听避免重复触发
      overlay.removeEventListener('transitionend', handleTransitionEnd);
      // 执行重定向
      window.location.href = this.dataset.targetUrl;
    }.bind(this), { once: true });
  });
});

关于动作延迟的补充说明 #

如果因兼容需求必须使用固定延迟（不推荐，易受设备性能影响），可以将JS逻辑替换为：

buttons.forEach(btn => {
  btn.addEventListener('click', function() {
    overlay.style.backgroundColor = getComputedStyle(this).backgroundColor;
    overlay.classList.add('active');
    
    // 延迟时间需与CSS动画时长完全匹配，比如0.6s就写600
    setTimeout(() => {
      window.location.href = this.dataset.targetUrl;
    }, 600);
  });
});

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