代码见https://gitee.com/XiaoKunErGe/JianShu.git历史第五次提交
1.设置一个初始开关

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

并在search组件中设置className,当focused为true时

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

到style中设置搜索栏宽度

&.focused {
       width: 300px;
    }

到icon图标className中添加focused,改变图标背景颜色

<i className={this.state.focused ? 'focused iconfont': 'iconfont'}>&#xe625;</i>

&.focused {
       background: #777;
       color: #fff;
    }

2.在search组件中添加方法控制搜索栏的收放

 onFocus={this.handleInputFocus.bind(this)}
 onBlur={this.handleInputBlur.bind(this)}

 handleInputFocus(){
      this.setState({
        focused: true
      })
  }
  handleInputBlur(){
      this.setState({
        focused: false
      })
  }

这时候就可以实现点击收放搜索栏了
4.添加动画效果
安装Transition动画
//yarn add react-transition-group
并引入
import { CSSTransition } from 'react-transition-group';

 <CSSTransition
              in={this.state.focused} //控制动画状态
              timeout={2000} 设置延时
              classNames="slide"
            >
            <NavSearch
              className={this.state.focused ? 'focused': ''}
              onFocus={this.handleInputFocus}
              onBlur={this.handleInputBlur}
            ></NavSearch>
            </CSSTransition>

然后到style中添加设置动画代码

export const SearchWrapper = styled.div`
  .slide-enter {
  //动画开始的时候
    transition: all .2s ease-out;
  }
  .slide-enter-active {
  //当动画执行的时候
    width: 300px;
  }
  .slide-exit {
  //当动画收起的时候
    transition: all .2s ease-out;
  }
  .slide-exit-active {
    width: 160px;
  }`;

这样动画效果就实现了。

index.js文件

import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group';
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button,
  SearchWrapper
} from "./style";

class Header extends Component {
  constructor(props){
    super(props);
    this.state = {
      focused: false,
    }
    this.handleInputFocus = this.handleInputFocus.bind(this);
    this.handleInputBlur = this.handleInputBlur.bind(this);
  }
  render(){
    return (
      <HeaderWrapper>
        <Logo />
        <Nav>
          <NavItem className='left active'>首页</NavItem>
          <NavItem className='left'>下载App</NavItem>
          <NavItem className='right'>登录</NavItem>
          <NavItem className='right'>
            <i className="iconfont">&#xe602;</i>
          </NavItem>
          <SearchWrapper>
            <CSSTransition
              in={this.state.focused}
              timeout={2000}
              classNames="slide"
            >
            <NavSearch
              className={this.state.focused ? 'focused': ''}
              onFocus={this.handleInputFocus}
              onBlur={this.handleInputBlur}
            ></NavSearch>
            </CSSTransition>
              <i className={this.state.focused ? 'focused iconfont': 'iconfont'}>&#xe625;</i>
          </SearchWrapper>
        </Nav>
        <Addition>
          <Button className='writting'>
            <i className="iconfont">&#xe616;</i>
            写文章
          </Button>
          <Button className='reg'>注册</Button>
        </Addition>
      </HeaderWrapper>
    )
  }
  handleInputFocus(){
      this.setState({
        focused: true
      })
  }
  handleInputBlur(){
      this.setState({
        focused: false
      })
  }
}
export default Header;

style.js代码

import styled from 'styled-components';
import logoPic from '../../statics/logo.png';
//这实际就是创建一个带有样式的div标签
export const HeaderWrapper = styled.div`
/**绝对定位*/
    position: relative;
     height: 58px;
     border-bottom: 1px solid #f0f0f0;
`;

//简书的简书Logo实际上是一个返回首页的a标签
export const Logo = styled.a.attrs({
  href:'/'//返回根路径
})`
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width:100px;
    height: 56px;
    background: url(${logoPic}); 
    background-size: contain; 
`;
export const Nav = styled.div`
    width: 960px;
    height: 100%;
    padding-right: 70px;
    box-sizing: border-box;
    margin: 0 auto;
`;
export const NavItem = styled.div`
    line-height: 56px;
    padding: 0 15px;
    font-size: 17px;
    color:#333;
    &.left {
      float: left;
    }
    &.right {
      float: right;
      color:#969696;
    }
    &.active {
      color: #ea6f5a;
    }
`;
export const NavSearch = styled.input.attrs(
  {
    placeholder: '搜索'
  })`
    width：160;
    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;
    }
    &.focused {
       width: 300px;
    }
  `;
export const Addition = styled.div`
  position: absolute;
  right: 0;
  top: 0;
  height: 56px;
`;
export const SearchWrapper = styled.div`
  position: relative;
  float: left;
  .slide-enter {
  //动画开始的时候
    transition: all .2s ease-out;
  }
  .slide-enter-active {
  //当动画执行的时候
    width: 300px;
  }
  .slide-exit {
  //当动画收起的时候
    transition: all .2s ease-out;
  }
  .slide-exit-active {
    width: 160px;
  }
   // background: yellow;
  .iconfont {
    position:absolute;
    right: 5px;
    bottom: 5px;
    width: 30px;
    line-height: 30px;
    border-radius: 15px;
    // background: green;
    text-align: center;
    &.focused {
       background: #777;
       color: #fff;
    } 
  } 
`;
export const Button = styled.div`
  float: right;
  margin-top: 9px;
  margin-right: 20px;
  padding: 0 20px;
  line-height: 38px;
  border-radius: 19px;
  border: 1px solid #ec6149;
  fond-size: 14px;
  &.reg {
     color: #ec6149;
  }
  &.writting {
     color: #fff;
     background: #ec6149;
  }
`;