咨询点击图片放大跳转落地页效果的名称及实现方法

一、效果名称 #

这种交互属于缩放式页面过渡（Zoom Page Transition），也常被称为图片点击放大跳转效果，核心是通过元素的缩放动画衔接当前页面与目标页面的视觉过渡，提升跳转的流畅性与沉浸感。

二、实现思路与关键步骤 #

• 步骤1：监听图片点击事件
  给目标图片绑定点击事件，触发时记录当前图片的位置、尺寸等信息，用于后续动画匹配。

  const targetImg = document.querySelector('.work-item-img');
  targetImg.addEventListener('click', function(e) {
    e.preventDefault();
    // 获取图片的位置和尺寸
    const rect = this.getBoundingClientRect();
    const imgData = {
      top: rect.top,
      left: rect.left,
      width: rect.width,
      height: rect.height,
      src: this.src
    };
    triggerZoomTransition(imgData, 'target-page-url');
  });
  

• 步骤2：创建过渡层元素
  点击后动态创建一个覆盖全屏的过渡层，将点击的图片克隆到这个层里，让它的初始位置和尺寸与原图片完全一致。

  function triggerZoomTransition(imgData, targetUrl) {
    const transitionLayer = document.createElement('div');
    transitionLayer.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #fff;
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
    `;
    const clonedImg = new Image();
    clonedImg.src = imgData.src;
    clonedImg.style.cssText = `
      position: absolute;
      top: ${imgData.top}px;
      left: ${imgData.left}px;
      width: ${imgData.width}px;
      height: ${imgData.height}px;
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    `;
    transitionLayer.appendChild(clonedImg);
    document.body.appendChild(transitionLayer);
  }
  

• 步骤3：执行缩放动画并跳转
  克隆图片添加到页面后，立即修改它的样式，让它放大到覆盖全屏（或匹配目标页面的视觉起始点），动画结束后跳转至目标页面，同时移除过渡层。

  // 接上面的triggerZoomTransition函数
  setTimeout(() => {
    clonedImg.style.cssText = `
      position: relative;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
    `;
  }, 10); // 延迟触发确保样式生效
  
  clonedImg.addEventListener('transitionend', function() {
    window.location.href = targetUrl;
    document.body.removeChild(transitionLayer);
  });
  

• 步骤4：目标页面的反向过渡（可选）
  如果需要目标页面加载时也有过渡效果，可以在目标页面初始化时，创建同样的过渡层，从全屏图片缩小到页面内的目标图片位置，再移除过渡层。

三、关键注意事项 #

• 动画曲线建议使用cubic-bezier自定义缓动，让过渡更自然，比如cubic-bezier(0.25, 0.46, 0.45, 0.94)
• 要确保克隆图片的object-fit属性和原图片一致，避免变形
• 跳转前要确保动画完全结束，否则会出现过渡中断的情况

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