react使用CSS实现react动画功能示例
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了react使用CSS实现react动画功能,结合实例形式分析了react使用CSS实现react动画功能具体步骤与实现方法,需要的朋友可以参考下
本文实例讲述了react使用CSS实现react动画功能。分享给大家供大家参考，具体如下：
react动画：
import React, { Component } from 'react';
class Boss extends Component {
constructor(props) {
super(props);
this.state = {
isShow:true
}
this.toTogger=this.toTogger.bind(this)
}
render() {
return (
<div>
<div className={this.state.isShow?'show':'hide'}>大BOSS--孙悟空</div>
<div><button onClick={this.toTogger}>召唤</button></div>
</div>
);
}
toTogger() {
this.setState({
isShow:this.state.isShow?false:true
})
}
}
export default Boss;
css:
.hide{opacity: 1;transition: all 1.5s ease-in;}
.show{opacity: 0;transition: all 1.5s ease-in;}
keyframes动画：
.hide{animation: hide-item 2s ease-in forwards;}
.show{animation: show-item 2s ease-in forwards;}
@keyframes hide-item{
0%{
opacity: 0;
color: red;
}
50%{
opacity: 0.5;
color: saddlebrown;
}
100%{
opacity: 1;
color: yellow;
}
}
@keyframes show-item{
0%{
opacity: 1;
color:green;
}
50%{
opacity: 0.5;
color:greenyellow;
}
100%{
opacity: 0;
color: yellow;
}
}
react-transition-group动画库：
import {CSSTransition} from 'react-transition-group';
render() {
return (
<div>
<CSSTransition
in={this.state.isShow}
timeout={2000}
classNames="boss-text"
unmountOnExit
>
{/* <div className={this.state.isShow?'show':'hide'}>大BOSS--孙悟空</div> *