3 react 简书 添加 头部搜索动态效果

1. 添加动态效果组件

　　yarn add react-transition-group

2. 修改 src/common/header/index.js

import React, {Component} from 'react';

import {CSSTransition} from 'react-transition-group';

import {

HeaderWrapper,

Logo,

Nav,

NavItem,

SearchWrapper,

NavSearch,

Addtion,

Button

} from './style';

class Header extends Component{

constructor(props){

super(props);

this.state = {

focused : false

}

this.searchFocus = this.searchFocus.bind(this);

this.searchBlur = this.searchBlur.bind(this);

}

searchFocus(){

this.setState({

focused : true

})

}

searchBlur(){

this.setState({

focused : false

})

}

render(){

return (

<HeaderWrapper>

<Logo />

<Nav>

<NavItem className="left active">首页</NavItem>

<NavItem className="left">下载</NavItem>

<NavItem className="right">登陆</NavItem>

<NavItem className="right">

<span className="iconfont">&#xe601;</span>

</NavItem>

<SearchWrapper>

<CSSTransition

in={this.state.focused}

timeout={200}

classNames='slide'

>

<NavSearch

className={this.state.focused? 'focused' : ''}

onFocus={this.searchFocus}

onBlur={this.searchBlur}

></NavSearch>

</CSSTransition>

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

</SearchWrapper>

</Nav>

<Addtion>

<Button className='writting'>

<span className="iconfont">&#xe703;</span>

写文章

</Button>

<Button className='reg'>注册</Button>

</Addtion>

</HeaderWrapper>

);

}

}

export default Header;

3. 修改 src/common/header/style.js

引入 slide-enter  ,   slide-enter-active , slide-exit , slide-exit-active

import styled from 'styled-components';

import LogoPic from '../../statics/logo.png';

export const HeaderWrapper = styled.div`

postition: relate;

height:56px;

border-bottom:1px solid #f0f0f0;

`;

export const Logo = styled.a.attrs({

href : '/'

})`

position: absolute;

left : 0;

top : 0;

display: block;

height:56px;

width:100px;

background: url(${LogoPic}) no-repeat;

background-size: contain;

`;

export const Nav = styled.div`

width:960px;

box-size: box-size;

padding-right: 70px;

height: 56px;

margin-left: 100px;

`

export const NavItem = styled.div`

&.left {

float: left;

}

&.right {

float: right;

color: #969696;

}

&.active {

color: #ea6f5a;

}

line-height: 56px;

front-size: 15px;

padding-left: 6px;

padding-right: 12px;

color: #333;

`;

export const SearchWrapper = styled.div`

float: left;

position: relative;

.iconfont {

position: absolute;

right: 5px;

bottom: 5px;

width: 30px;

line-height:30px;

border-radius : 15px;

text-align:center;

&.focused{

background : #777;

color : #fff;

}

}

`;

export const NavSearch = styled.input.attrs({

placeholder : '搜索'

})`

width : 160px;

height : 38px;

border: none;

outline : none;

padding : 0 35px 0 20px;

box-size: box-size;

margin-top: 9px;

margin-left: 20px;

border-radius : 19px;

background: #eee;

font-size: 14px;

&::placeholder{

color: #999;

}

&.focused{

width: 200px;

}

&.slide-enter {

width: 160px;

transition: all .2s ease-out;

}

&.slide-enter-active {

width: 200px;

}

&.slide-exit {

width: 200px;

transition: all .2s ease-out;

}

&.slide-exit-active {

width: 160px;

}

`;

export const Addtion = styled.div`

position:absolute;

right: 0;

top: 0;

height: 65px;

`;

export const Button = styled.div`

float:right;

line-height:38px;

margin-top:9px;

margin-right: 20px;

border-radius: 19px;

border : 1px solid rgba(236,97,73,.7);

color : #fff;

padding : 0 20px;

&.reg{

color:#ea6f5a;

}

&.writting{

background:#ea6f5a;

}

`;