继续在这个上面做练习——实现一个方框的动画效果（Day：44）

[XJQ124]

任务：完成动画效果

---

1、今天Review代码以后，马老师给出一些细节上的问题，一一修复

蒙层的下面为什么会多出来一点 源代码是这样的

<img src={photo.src} alt={'这是图片'} style={{height:'100%', width: '100%', borderRadius: 4 />

造成原因： img本来是行内元素，inline元素会默认产生元素代码中的空白符，大约会有2、3px的空白间隔。他不会影响你图片，但是加上了蒙层就会发现下面会多一些

解决办法：

    <img src={photo.src} alt={'这是图片'} style={{height:'100%', width: '100%', borderRadius: 4,display:'block' }} />

2、优化了两个部分的代码结构

第一部分

    const gitDiv = () => {
        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)=>(
        <div >
            <div key={index} className='rectangle'>
                <div style={{ marginRight: 8, marginLeft: 8 }}  >
                    {rectangle.icon}
                </div>
                {rectangle.text}<CaretDownOutlined style={{ fontSize: 8, marginLeft: 8, marginRight: 8 }} />
            </div>
        </div> 
    ))
    }

第二部分

    const getButtons = ()=>{
    const texts = ['项目', '资源', '图像', '人物', '原型', '直播', '情绪板']
    return _.map(texts,(button,index)=>(
        <Button
        key={index} 
        shape='round' 
        type="text" 
        className='otherButton'  
        style={{ marginRight: 10 }}
        >
            {button}
        </Button>
    ))
    }

最后直接在需要的位置使用大括号引入{}

3、完成一个方框的移动动画，目前还在继续，，，