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"></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'}></span>
</SearchWrapper>
</Nav>
<Addtion>
<Button className='writting'>
<span className="iconfont"></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;
}
`;
