有关css的就不多说了,具体自己看文档。只是稍微在这里提个醒。
过渡
// transition 过度属性
transition:all 2s ease-in
动画
// forwards 保留动画最后一帧的效果
.hide{
animation: item-hide 2s ease-in forwards;
}
@keyframes item-hide {
0%{
opacity: 1;
color: red;
}
50%{
opacity: 0.5;
color:green;
}
100%{
opacity: 0;
color: blue
}
}
只能实现简单的效果
官方提供了一种react-transition-group动画,在这里说明几个常用的,具体可以自己看文档。比如钩子函数
react-transition-group
安装
npm install react-transition-group -S
CSSTransition
操作单个对象
this.state = {
show:true
}
<CSSTransition
classNames="fade" // 写样式 以 .fade开始
in={this.state.show} //初始状态
timeout={1000} //延迟
unmountOnExit // api
onEntered={(el)=>{el.style.color='blue'}} // 利用对应钩子函数改变样式
appear={true} // 初始状态是否要动画效果
>
<div>hello world</div>
</CSSTransition>
<button onClick={this.ChangeState.bind(this)}>改变</button>
ChangeState(){
this.setState({
show:this.state.show ? false:true
})
}
style.css
.fade-enter,.fade-active{ // fade-active与appear有关
opacity: 0;
}
.fade-enter-active,.fade-appear-active{ // fade-appear-active与appear有关
opacity: 1;
transition: opacity 1s ease-in
}
.fade-enter{
opacity: 1;
}
.fade-exit-active{
opacity: 1;
transition: opacity 1s ease-in
}
.fade-exit-done{
opacity: 0;
}
TransitionGroup
<ListGroup>
<TransitionGroup className="todo-list"> // 最外层包裹
{items.map(({ id, text }) => (
<CSSTransition // 包裹单独item
key={id}
timeout={500}
classNames="fade"
>
<ListGroupItem>
<Button
onClick={() => {
this.setState(preventState => {
items: [...items,'新增项'] // 追加元素
}));
}}
>
</Button>
</ListGroupItem>
</CSSTransition>
))}
</TransitionGroup>
</ListGroup>