简书动画报错在这里输入代码import React,{Component} from 'react’
import {CSSTransition} from 'react-transition-group’
import {
HeaderWrapper,
Logo,
Nav,
NavItem,
SearchWrapper,
NavSearch,
Addition,
Button
} from ‘./style’

class Header extends Component{

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

render(){
    return(
        <HeaderWrapper>
           <Logo/>
           <Nav>
               <NavItem className='lf active'>首页</NavItem>
               <NavItem className='lf'>下载App</NavItem>
               <NavItem className='ri'>登陆</NavItem>
               <NavItem className='ri'>
               <i className="iconfont">&#xe636;</i>
               </NavItem>
               <SearchWrapper>
                   <CSSTransition
                   in={this.state.focused}
                    timeout={200}
                    className="slide"
                   >
                     <NavSearch
                     className={this.state.focused?'focused':""}
                     onFocus={this.handelInputFocus}
                     onBlur={this.handelInputBlur}
                     ></NavSearch>
                   </CSSTransition>
               
                 <i className={this.state.focused?'focused iconfont':"iconfont"}>&#xe678;</i>
               </SearchWrapper>
               
           </Nav>
           <Addition>
              
               <Button className='writting'>
               <i className="iconfont">&#xe61b;</i>
               写文章
               </Button>
               <Button className='reg'>注册</Button>
           </Addition>
        </HeaderWrapper>
    )
}

handelInputFocus(){
    this.setState({
        focused:true
    })
}

handelInputBlur(){
    this.setState({
        focused:false
    })
}

}

export default Header;