index.js：

			<SearchWrapper>
						<CSSTransition
							in={this.state.focused}
							timeout={200}
							className="slide"
						>
							<NavSearch className={this.state.focused ? "focused" : ""}
								onClick={this.handleInputFocus} onBlur={this.handleInputBlur}></NavSearch>
						</CSSTransition>
						<i className={this.state.focused ? "focused iconfont" : "iconfont"}>&#xe614;</i>
					</SearchWrapper>

style.js:

export const NavSearch = styled.input.attrs({
	placeholder: '搜索'
})`
	width: 160px;
	height: 38px;
	padding: 0 35px 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:#777
	&.slide-enter {
		transition: all .2s ease-out;
	}
	&.slide-enter-active {
		width: 240px;	background-color:grey;
	}
	&.slide-exit {
		transition: all .2s ease-out;
	}
	&.slide-exit-active {
		width: 160px;
	}
	&::placeholder {
		color: #999;
	}
	&.focused{
		width:240px
	}
`;