实现类似谷歌相册的缩略图全屏展开过渡效果技术咨询

嘿，我完全懂你想要实现的那种谷歌相册风格的缩略图全屏展开过渡效果！这种流畅的动画确实能大大提升用户体验，我来给你梳理一套具体的实现方案，帮你搞定它～

这种效果的关键在于克隆元素 + 状态过渡，核心步骤大概是这样：

• 点击缩略图时，克隆出一个和原元素完全一样的副本
• 给副本设置和原缩略图完全重合的初始位置、尺寸
• 通过添加CSS类，触发副本从缩略图状态平滑过渡到全屏状态
• 关闭时反向执行这个动画，最后移除克隆元素

HTML结构 #

先准备好缩略图容器和用来承载全屏元素的容器：

<!-- 缩略图容器 -->
<div class="thumbnails-grid">
  <img src="your-image-1.jpg" class="thumbnail" alt="图片1">
  <img src="your-image-2.jpg" class="thumbnail" alt="图片2">
  <!-- 可以放更多缩略图 -->
</div>

<!-- 全屏元素的容器，固定在视口最上层 -->
<div class="fullscreen-overlay"></div>

CSS样式 #

这里要注意过渡动画的曲线和状态切换的细节：

/* 缩略图基础样式 */
.thumbnail {
  width: 200px;
  height: 150px;
  object-fit: cover;
  cursor: zoom-in;
  margin: 8px;
  border-radius: 4px;
}

/* 全屏遮罩层 */
.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 克隆的全屏图片初始状态 */
.fullscreen-image {
  position: absolute;
  object-fit: contain;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* 用这个贝塞尔曲线会让动画更接近谷歌相册的流畅感 */
}

/* 展开后的全屏状态 */
.fullscreen-image.expanded {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: 90vw !important;
  height: 90vh !important;
}

JavaScript逻辑 #

处理点击事件、克隆元素、状态切换和关闭逻辑：

const thumbnails = document.querySelectorAll('.thumbnail');
const fullscreenOverlay = document.querySelector('.fullscreen-overlay');

thumbnails.forEach(thumb => {
  thumb.addEventListener('click', () => {
    // 获取原缩略图相对于视口的位置和尺寸
    const rect = thumb.getBoundingClientRect();
    
    // 克隆图片元素
    const clonedImg = thumb.cloneNode(true);
    clonedImg.classList.remove('thumbnail');
    clonedImg.classList.add('fullscreen-image');
    
    // 设置初始样式，和原缩略图完全重合
    clonedImg.style.top = `${rect.top}px`;
    clonedImg.style.left = `${rect.left}px`;
    clonedImg.style.width = `${rect.width}px`;
    clonedImg.style.height = `${rect.height}px`;
    
    // 清空遮罩层并添加克隆元素
    fullscreenOverlay.innerHTML = '';
    fullscreenOverlay.appendChild(clonedImg);
    
    // 触发重绘，确保动画能正常生效
    requestAnimationFrame(() => {
      fullscreenOverlay.style.opacity = '1';
      fullscreenOverlay.style.pointerEvents = 'auto';
      clonedImg.classList.add('expanded');
    });
    
    // 点击遮罩层关闭全屏
    fullscreenOverlay.addEventListener('click', () => {
      clonedImg.classList.remove('expanded');
      fullscreenOverlay.style.opacity = '0';
      fullscreenOverlay.style.pointerEvents = 'none';
      
      // 动画结束后移除克隆元素，避免占用内存
      clonedImg.addEventListener('transitionend', () => {
        clonedImg.remove();
      }, { once: true });
    });
  });
});

• 用getBoundingClientRect()获取元素位置，能确保克隆元素和原缩略图精准重合
• 必须用requestAnimationFrame()触发状态切换，否则浏览器可能会直接跳过初始状态，导致动画不显示
• 选择合适的过渡曲线（比如示例中的贝塞尔曲线），能让动画更自然顺滑
• 关闭时要等待过渡动画结束再移除元素，保证反向动画完整执行

内容的提问来源于stack exchange，提问作者Oh Wan Sik