顶部搜索栏有一个点击变宽，移除焦点变窄的动画效果。

我们先修改一下之前的一些样式和布局问题：

export const NavSearch = styled.input.attrs({
    placeholder:'搜索'
})`
    width:160px;
    height:38px;
    padding:0 30px 0 20px;
    margin-top:9px;
    margin-left:20px;
    box-sizing:border-box;
    border:none;
    outline:none;
    border-radius:19px;
    background:#eee;
    font-size:14px;
    color:#666;
    &::placeholder{
        color:#999;
    }
`;
              

1. 鼠标的移入移出样式切换

在React里面尽量不要去直接修改DOM，而是应该去定义数据，数据变化，界面跟着变化，改变一下传统的思路。

简单来说我们的思路首先需要根据一个state来修改搜索框的样式，具体我们可以通过判断state的一个参数来给标签添加或者修改Class来达到效果：

constructor(props) { super(props); this.state={ focused:false } }

                <SearchWrapper>
    <NavSearch
        className={this.state.focused?'focused':''}
    >

    </NavSearch>
    <i className={this.state.focused?'focused iconfont':'iconfont'}></i>
</SearchWrapper>
              

接着我们需要去做的就是应该何时，如何去控制这个focused状态了，这里的时机应该就是input获取和失去焦点的时候：

就可以了。

2. 添加动画

首先添加一个第三方库：

引入对应功能：

import {CSSTransition} from 'react-transition-group';

根据官方文档之前笔记，应该这样写：

                <SearchWrapper>
    <CSSTransition
        in={this.state.focused}
        timeout={200}
        classNames="slide"
    >
        <NavSearch
            className={this.state.focused ? 'focused' : ''}
            onFocus={this.handleInputFocus}
            onBlur={this.handleInputBlur}
        >
        </NavSearch>
    </CSSTransition>
    <i className={this.state.focused ? 'focused iconfont' : 'iconfont'}></i>
</SearchWrapper>
              

in是transition的开关，timeout是动画时间，使用的套组Class是slide

接着需要去样式中为slide添加几个样式过渡挂载的样式：

在使用CSSTransition时，需要注意到它会在内部Nav组件中添加一些样式，如slide-enter和slide-exit等。因此，我们需要进行一些优化，将Wrapper组件中的样式移动到NavSearch组件上。这样可以使代码更加简洁，同时减少不必要的样式冗余，提升页面加载速度和性能。同时，我们还可以考虑使用CSS Modules等技术来管理CSS样式，以便更好地维护和管理项目。在Web开发中，优化和提升性能一直是一个重要的话题。只有通过不断地优化和改进，才能确保网站的流畅性和用户体验。因此，我们需要不断探索新的技术和方法，来提高我们的开发效率和代码质量。