slide-exit-active 被激活了，但是slide-exit没有过渡，真的是bug

1.首先声明 我把过渡时间改成1s，为了效果明显
2.我在 < CSSTrasition timeout={1000}>也改成1s了。

	.slide-enter{
		transition: all 1s ease-out;
	}
	.slide-enter-active {
		width: 240px;
	}
	.slide-exit{
		transition: all 1s ease-out;
	}
	.slide-exit-active {
		width: 400px; // 为了让效果明显 我先拉伸到更宽
	}

Bug:

进入动画都很正常，但是离开动画出现了问题，slide-exit-active有被激活，也就是说有拉伸到400px，但是没有拉伸的过渡动画，是一闪而过。

整个效果是： 160px 进入 ==> 缓慢拉伸到 240px, 离开 迅速变成400px 然后1秒后 迅速 回到160px。

Test:

我测试了很多遍，无论是离开时改成160px（恢复原样），还是改成400px（更长）,都是一个问题，离开时的过渡无效。

解决:

希望dell老师能尽快看到，帮我解决。

以下是完整代码：
1.header.js

import React, { Component } from 'react'
import { CSSTransition } from 'react-transition-group'
import {
	HeaderWrapper,
	Logo,
	Nav,
	NavItem,
	NavSearch,
	SearchWrapper,
	Addition,
	Button
} 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 href='/'/>
				<Nav>
					<NavItem className='left active'>首页</NavItem>
					<NavItem className='left'>下载</NavItem>
					<NavItem className='right'>登陆</NavItem>
					<NavItem className='right'>
						<i className='iconfont iconAa'></i>
					</NavItem>
					<SearchWrapper>
						<CSSTransition
							in={this.state.focused}
							timeout={1000}
							classNames='slide'
						>
							<NavSearch
								className={this.state.focused ? 'focused' : ''}
								onFocus={this.handleInputFocus}
								onBlur={this.handleInputBlur}
							/>
						</CSSTransition>
						<i className={this.state.focused ? 'iconfont icon41 focused' : 'iconfont icon41'}></i>
					</SearchWrapper>
				</Nav>
				<Addition>
				<Button className='writing'>
					<i className="iconfont iconWriting"></i>
					写文章
				</Button>
				<Button className='reg'>注册</Button>
				</Addition>
			</HeaderWrapper>
		)
	}
	handleInputFocus () {
		this.setState({
			focused: true
		})
	}
	handleInputBlur () {
		this.setState({
			focused: false
		})
	}
}

export default Header

2.style.js

import styled from 'styled-components'
import logoPic from '../../static/nav-logo.png'

export const HeaderWrapper = styled.div`
  position: relative;
  height: 56px;
	border-bottom: 1px #ccc solid;
`
export const Logo = styled.a`
  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;
  &.left {
    float: left;
  }
  &.right {
    float: right;
    color: #969696;
  }
  &.active {
    color: #ea6f5a;
  }
`
export const SearchWrapper = styled.div`
  position: relative;
  float: left;
  .iconfont {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    &.focused {
      color: #fff;
      background: rgba(0,0,0,.4);
    }
  }
`
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;
  }
  &.focused {
    width: 240px;
  }
  &.slide-enter {
    transition: all 1s ease-out;
  }
  &.slide-enter-active {
    width: 240px;
  }
  $.slide-exit {
    transition: all 1s ease-out;
  }
  &.slide-exit-active {
    width: 400px;
  }
`
export const Addition = styled.div`
  position: absolute;
  right: 0;
  top: 0;
  height: 56px;
`
export const Button = styled.div`
  float: right;
  margin-top: 9px;
  margin-left: 20px;
  padding: 0 20px;
  line-height: 38px;
  border-radius: 19px;
  border: 1px solid #ec6149;
  font-size: 14px;
  &.reg {
    color: #ec6149;
  }
  &.writing {
    color: #fff;
    background: #ec6149;
    margin-right: 10px;
    .iconfont {
      margin-right: 3px;
    }
  }
`