React按钮Div动画与显示异常问题排查及修复请求

1. 跨组展开失效问题修复 #

原因 #

当前代码用单一状态变量控制两组Div的展开/关闭，关闭一组后状态被置为false，点击另一组按钮时，状态切换逻辑虽能将值转为true，但渲染时未做组间状态区分，导致对应Div无法正常展开。

解决代码 #

改用对象存储两组独立的展开状态：

import { useState } from 'react';
import './App.css';

function App() {
  const [groupExpanded, setGroupExpanded] = useState({
    group1: false,
    group2: false
  });

  const toggleGroup = (groupName) => {
    setGroupExpanded(prevState => ({
      ...prevState,
      [groupName]: !prevState[groupName]
    }));
  };

  return (
    <div className="App">
      <button onClick={() => toggleGroup('group1')}>按钮1</button>
      <div className="group">
        <div className={`box ${groupExpanded.group1 ? 'open' : ''}`} style={{ animationDelay: '0ms' }}></div>
        <div className={`box ${groupExpanded.group1 ? 'open' : ''}`} style={{ animationDelay: '100ms' }}></div>
        <div className={`box ${groupExpanded.group1 ? 'open' : ''}`} style={{ animationDelay: '200ms' }}></div>
      </div>

      <button onClick={() => toggleGroup('group2')}>按钮2</button>
      <div className="group">
        <div className={`box ${groupExpanded.group2 ? 'open' : ''}`} style={{ animationDelay: '0ms' }}></div>
        <div className={`box ${groupExpanded.group2 ? 'open' : ''}`} style={{ animationDelay: '100ms' }}></div>
        <div className={`box ${groupExpanded.group2 ? 'open' : ''}`} style={{ animationDelay: '200ms' }}></div>
      </div>
    </div>
  );
}

export default App;

2. 从右至左依次展开动画修复 #

原因 #

未设置Div的初始偏移状态，也未给每个Div分配递增的动画延迟，导致无法实现依次展开的递进效果。

解决代码 #

修改App.css配置动画逻辑：

.App {
  padding: 20px;
}

.group {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.box {
  width: 100px;
  height: 100px;
  background: #42b983;
  /* 初始状态：向右偏移100%，完全隐藏 */
  transform: translateX(100%);
  opacity: 0;
  /* 绑定过渡动画属性 */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.box.open {
  /* 展开状态：回到原位并显示 */
  transform: translateX(0);
  opacity: 1;
}

修改后，每组按钮仅控制自身对应Div的展开/关闭，三个Div会按0ms、100ms、200ms的延迟依次从右侧滑入显示。

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