完成方框动画（Day：45）

[XJQ124]

任务：完成方框动画

进度80%

---

1、 实现代码

  const GitDiv = () => {
        const [expand, setExpand] = useState(null)
        const toggle = (e, index) => {
            console.log(e.currentTarget)
            e.currentTarget.children[1].classList.toggle('rectangle-text')
            setExpand(prevIndex => (prevIndex === index ? null : index));
        };
        const rectangles = [
            { icon: <RocketOutlined />, text: '创意领域' },
            { icon: <ToolOutlined />, text: '工具' },
            { icon: <RadarChartOutlined />, text: '颜色' },
            { icon: <HomeOutlined />, text: '位置' },
            { icon: <ShopOutlined />, text: '学校' },
            { icon: <BarChartOutlined />, text: '资源' },
            { icon: <TeamOutlined />, text: '订阅' },
        ];
        return _.map(rectangles, (rectangle, index) => (
            <button className='rectangle' onClick={(e) => toggle(e, index)} key={index}>
                    <div style={{ marginRight: 8, marginLeft: 8 }} >{rectangle.icon}</div>
                    <div className='rectangle-text'>{rectangle.text}</div>
                    <CaretDownOutlined style={{ fontSize: 8, marginLeft: 8, marginRight: 8, transform: `rotate(${expand === index ? 180 : 0}deg)`}}/>
            </button>
        ))
    }

2、css部分

/* 第一个长方形内容 */
.rectangle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 120px;
  margin-right: 10px;

  height: 36px;
  border-radius: 4px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.1);;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}

.rectangle:focus {
  border-color: #005cff;
}

.rectangle:focus .rectangle-text {
    transform: translate(-18px, -18px);
    font-size: 10px;
    transition: 0.3s;
    background-color: #fff;
    z-index: 99999;
    padding: 0 3px;
}

3、剩余问题

1、边框的宽度问题 2、图标带来的点击效果问题