使用CSS实现媒体画廊图片切换动画：主图展示与网格位移

我们可以通过CSS过渡动画配合JavaScript控制DOM类名切换，实现点击网格图片后主图呈现、网格整体下压的效果，关闭时再通过动画回位。核心是给容器添加状态类，利用CSS的transition属性实现平滑过渡。

1. 调整HTML结构 #

• 给主图容器添加初始隐藏样式，增加关闭按钮
• 给网格图片添加自定义属性存储图片标识（方便后续替换主图内容）

<div>
  <!-- 主图容器：初始隐藏 -->
  <div class="main-image-container">
    <button class="close-btn">×</button>
    <div class="main-image">
      点击网格图片查看大图
    </div>
  </div>
  <!-- 图片网格 -->
  <div class="media-grid">
    <div class="image" data-src="image1.jpg">图片1</div>
    <div class="image" data-src="image2.jpg">图片2</div>
    <div class="image" data-src="image3.jpg">图片3</div>
    <div class="image" data-src="image4.jpg">图片4</div>
    <div class="image" data-src="image5.jpg">图片5</div>
    <div class="image" data-src="image6.jpg">图片6</div>
    <div class="image" data-src="image7.jpg">图片7</div>
    <div class="image" data-src="image8.jpg">图片8</div>
    <div class="image" data-src="image9.jpg">图片9</div>
    <div class="image" data-src="image10.jpg">图片10</div>
  </div>
</div>

2. 添加CSS动画与状态样式 #

• 给主图容器添加opacity和height的过渡，实现淡入/淡出+高度变化的呈现动画
• 给网格容器添加margin-top的过渡，实现下压/回位的动画
• 给网格图片添加点击反馈的过渡效果
• 关闭按钮样式优化

/* 基础样式 */
.image {
  height: 200px;
  width: 200px;
  border: 2px solid black;
  cursor: pointer;
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image:hover {
  transform: scale(1.02);
}

.media-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 10px 10px;
  /* 网格下压的过渡动画 */
  transition: margin-top 0.3s ease;
}

.main-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  opacity: 0;
  /* 主图呈现的过渡动画 */
  transition: height 0.3s ease, opacity 0.3s ease;
  position: relative;
}

/* 主图激活状态：显示并展开高度 */
.main-image-container.active {
  height: 300px;
  opacity: 1;
  margin-bottom: 1rem;
}

.main-image {
  width: 250px;
  height: 250px;
  border: 2px solid orange;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 网格下压状态 */
.media-grid.expanded {
  margin-top: 2rem;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #333;
}

.close-btn:hover {
  color: #ff4444;
}

3. JavaScript交互逻辑 #

• 监听网格图片的点击事件：将选中图片的内容（或替换为图片元素）同步到主图，激活主图容器并让网格下压
• 监听关闭按钮的点击事件：移除激活状态，让网格回位，重置主图内容

// 获取DOM元素
const mainImageContainer = document.querySelector('.main-image-container');
const mainImage = document.querySelector('.main-image');
const mediaGrid = document.querySelector('.media-grid');
const images = document.querySelectorAll('.image');
const closeBtn = document.querySelector('.close-btn');

// 点击网格图片的处理逻辑
images.forEach(image => {
  image.addEventListener('click', () => {
    // 将选中的图片文本（或替换为<img>元素）同步到主图
    mainImage.textContent = image.textContent;
    // 激活主图容器和网格下压状态
    mainImageContainer.classList.add('active');
    mediaGrid.classList.add('expanded');
  });
});

// 关闭主图的处理逻辑
closeBtn.addEventListener('click', () => {
  // 移除激活状态，触发回位动画
  mainImageContainer.classList.remove('active');
  mediaGrid.classList.remove('expanded');
  // 等待动画结束后重置主图内容
  setTimeout(() => {
    mainImage.textContent = '点击网格图片查看大图';
  }, 300);
});

效果说明 #

• 点击任意网格图片：主图容器会从隐藏状态平滑展开显示选中的内容，同时网格容器通过margin-top变化实现“下压”效果
• 点击右上角关闭按钮：主图容器平滑收起，网格容器同步回位到初始位置
• 所有动画均通过CSStransition实现，保证流畅性，JavaScript仅负责状态切换

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