实现 React 中图像悬停时的响应式手风琴展开效果（中间放大、两侧收缩）-html教程-PHP中文网

实现 React 中图像悬停时的响应式手风琴展开效果（中间放大、两侧收缩）

本文详解如何在 react 中实现三张图片的响应式手风琴悬停动画：当鼠标悬停任一图片时，该图平滑放大居中，左右图片同步等比收缩并保持布局流，避免绝对定位导致的布局塌陷，全程基于 flex 布局与 css 过渡实现。

本文详解如何在 react 中实现三张图片的响应式手风琴悬停动画：当鼠标悬停任一图片时，该图平滑放大居中，左右图片同步等比收缩并保持布局流，避免绝对定位导致的布局塌陷，全程基于 flex 布局与 css 过渡实现。

要实现真正符合“手风琴（accordion）逻辑”的图像悬停效果——即被悬停项动态占据主视觉区域，其余项自适应压缩但不移位、不遮挡、不脱离文档流——关键在于摒弃 position: absolute。原代码中 .tab 使用绝对定位，使其脱离 Flex 容器的布局上下文，导致缩放时无法触发兄弟元素重排，从而出现“覆盖”或“消失”的错觉。

✅ 正确解法是：完全交由 Flex 布局控制尺寸分配 + flex-grow 动态权重 + 平滑过渡。

Dagre React Flow

使用 dagre 与 React Flow (@xyflow/react) 实现自动图布局。适用于自动布局、层级布局、树形结构或节点排列等场景。

下载

以下是重构后的完整实现：

✅ 优化后的 React 组件（App.js）

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [hoveredIndex, setHoveredIndex] = useState(null);

  const imageUrls = [
    "https://images.unsplash.com/photo-1682686581551-867e0b208bd1?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1697219590638-d2db7748802e?q=80&w=1452&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    "https://images.unsplash.com/photo-1682686581427-7c80ab60e3f3?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  ];

  return (
    <div classname="App">
      {imageUrls.map((url, index) => (
        <div key="{index}" classname="{`ctr-accordion" hoveredindex : onmouseenter="{()"> setHoveredIndex(index)}
          onMouseLeave={() => setHoveredIndex(null)}
        >
          @@##@@
        </div>
      ))}
    </div>
  );
}

✅ 优化后的 CSS（styles.css）

.App {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}

.ctr-accordion {
  flex: 1; /* 默认均分空间 */
  height: 720px;
  border-radius: 25px;
  overflow: hidden;
  transition: flex 0.5s ease, transform 0.3s ease;
  cursor: pointer;
  margin: 0 5px; /* 避免相邻项粘连 */
}

.ctr-accordion.active {
  flex: 5; /* 悬停时权重设为 5，其余自动按比例收缩（1:1 → 总权重 7 → 当前占 ~71%）*/
  z-index: 2;
}

.ctr-accordion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.ctr-accordion:hover img {
  transform: scale(1.03); /* 可选：轻微放大增强反馈 */
}

/* 响应式保护：小屏幕下限制最小宽度 */
@media (max-width: 768px) {
  .ctr-accordion {
    height: 400px;
  }
}

? 核心原理说明

flex: 1 vs flex: 5：初始三张图各占 1/3 空间；悬停某一项时，其 flex 设为 5，其余仍为 1，总权重变为 5+1+1=7 → 悬停项占比 5/7 ≈ 71%，左右各占 1/7 ≈ 14%，自然形成“中间膨胀、两侧收缩”的手风琴节奏。
无绝对定位：所有元素保留在 Flex 流中，尺寸变化实时触发浏览器重排（reflow），兄弟元素自动响应压缩，彻底解决“隐藏/覆盖”问题。
方向天然对称：Flex 默认 flex-direction: row，从左到右排列；由于权重计算与位置无关，无论悬停第1、第2还是第3张图，动画都表现为“向中心扩展、向两侧挤压”，完美契合“中→左/右扩散”的设计诉求。