简书网站的搭建-动画效果

实现的功能：input输入框聚焦的时候是这样：

失去焦点的时候是这样：

创建constructor

首先创建constructor这个钩子函数，也就是说聚不聚焦全在focused这个值在控制，当聚焦时，值为true，失去焦点时值为false就行了。

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

接下来，在我们的元素上绑定事件：

<SearchWrapper>
  <NavSearch
    className={this.state.focused ?'focused':''}
    onFocus={this.handleInputFocus}
    onBlur={this.handleInputBlur}
  ></NavSearch>
     <i className={this.state.focused ?'focused iconfont':'iconfont'}>&#xe617;</i></SearchWrapper>

我们在<NavSearch>这个组件上绑定了onFocus={this.handleInputFocus}和onBlur={this.handleInputBlur}，接下来是函数：

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

这样，一个简单的动作的事件绑定就做好了

---

为了美观，我们对这个事件写上缓冲效果：

我们要在终端安装上一个插件：

yarn add react-transition-group

怎么使用这个插件呢，我们要给<NavSearch>这个组件写上动画，对吧，所以在header目录下的index.js里引入这个插件，然后嵌套在<NavSearch>这个组件外面就可以了

 CSSTransition有几个值： 入场出场事件 true和false的值  类名字

<CSSTransition timeout={200} in={this.state.focused} classNames='slide'>

 动画的效果写在了style.js里：

export const NavSearch =styled.input.attrs({
  placeholder:'搜索'
})`
  width: 160px;
  height: 38px;
  border: none;
  outline: none;
  border-radius: 19px;
  background: #eee;
  margin-top: 9px;
  padding: 0 30px 0 20px;
  box-sizing: border-box;
  font-size: 14px;
  margin-left: 20px;
  color: #666;
  &::placeholder{
    color: #999;
  }
  &.slide-enter{
    transition: all .2s ease-in-out;
  }
  &.slide-enter-active{
    width: 240px;
  }
  &.slide-exit{
    transition: all .2s ease-out;
  }
  &.slide-exit-active{
    width: 160px;
  }
  &.focused{
    width: 240px;
  }
`