如何实现点击URL延迟跳转并保持图片放大状态不缩小？

架构老林

2026-7-6

实现点击图片完成动画后再跳转的方案

纯CSS无法实现这个需求，因为:active状态仅在鼠标按下时生效，松开后就会立刻恢复原状态，而页面跳转是在点击事件完成时触发，两者的时机无法通过CSS同步控制。必须借助JavaScript来拦截默认跳转行为，等待动画完成后再手动触发页面跳转。

具体实现步骤：

调整HTML结构：确保图片包裹在<a>标签内，并给链接添加自定义类用于监听事件
修改CSS：将原来的:active状态替换为自定义类，避免状态自动消失
添加JavaScript逻辑：拦截点击事件，触发动画，延迟后执行跳转

代码示例：

HTML

<a href="你的项目页URL" class="delayed-project-link">
  <img src="图片地址" class="project-zoom" alt="项目预览图">
</a>

CSS

.project-zoom {
    transition: transform 1s, filter 1s ease-in-out;
    margin: 0 auto;
}

/* 用自定义.active类替代:active，保持动画状态 */
.project-zoom.active {
    -ms-transform: scale(10); /* IE 9兼容 */
    -webkit-transform: scale(10); /* Safari 3-8兼容 */
    transform: scale(10);
    filter: blur(2px);
}

JavaScript（原生JS，无需jQuery）

// 给所有目标链接绑定点击事件
document.querySelectorAll('.delayed-project-link').forEach(link => {
  let isAnimating = false; // 防止重复点击触发多次跳转
  link.addEventListener('click', function(e) {
    if (isAnimating) return;
    isAnimating = true;
    
    // 阻止默认跳转行为
    e.preventDefault();
    const targetImg = this.querySelector('.project-zoom');
    
    // 添加类触发动画
    targetImg.classList.add('active');
    
    // 等待动画完成（1秒，和CSS过渡时长一致）后跳转
    setTimeout(() => {
      window.location.href = this.href;
    }, 1000);
  });
});