react使用CSS实现react动画功能示例
本文实例讲述了react使用CSS实现react动画功能。分享给大家供大家参考，具体如下：
react动画：
importReact,{Component}from'react';
classBossextendsComponent{
constructor(props){
super(props);
this.state={
isShow:true
}
this.toTogger=this.toTogger.bind(this)
}
render(){
return(
大BOSS--孙悟空
召唤
css:
.hide{opacity:1;transition:all1.5sease-in;}
.show{opacity:0;transition:all1.5sease-in;}
keyframes动画：
.hide{animation:hide-item2sease-inforwards;}
.show{animation:show-item2sease-inforwards;}
@keyframeshide-item{
0%{
opacity:0;
color:red;
}
50%{
opacity:0.5;
color:saddlebrown;
}
100%{
opacity:1;
color:yellow;
}
}
@keyframesshow-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(
{/*大BOSS--孙悟空 */}
大BOSS--孙悟空
{this.state.btn}
.boss-text-enter{opacity:0;}
.boss-text-enter-active{opacity:1;transition:opacity2000ms;}
.boss-text-enter-done{opacity:1;}
.boss-text-exit{opacity:1;}
.boss-text-exit-active{opacity:0;transition:opacity2000ms;}
.boss-text-exit-done{opacity:0;}
多DOM动画：
importReact,{Component,Fragment}from'react';
importListfrom'./List.js';
importaxiosfrom'axios';
importBossfrom'./Boss';
import{CSSTransition,TransitionGroup}from'react-transition-group'
classTestextendsComponent{
constructor(props){
super(props);
this.state={
inputValue:'aaa',
list:[],
}
//this.add=this.add.bind(this);
}
addList(){
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
change(e){
this.setState({
//inputValue:e.target.value
inputValue:this.input.value
})
}
delete(i){
//console.log(i);
constlist=this.state.list;
list.splice(i,1);
this.setState({
list:list
})
}
componentDidMount(){
//console.log('componentDidMount');
axios.get('https://www.easy-mock.com/mock/5e1d3d1564a3c20d7f366f91/ReactDemo1/App')
.then((res)=>{
console.log('获取数据'+JSON.stringify(res));
this.setState({
list:res.data.data
});
})
.catch((error)=>{console.log('获取数据失败'+error)});
}
render(){
console.log('3-render');
return(
{this.input=input}}value={this.state.inputValue}onChange={this.change.bind(this)}/>
添加
{
this.state.list.map((v,i)=>{
return(
);
})
}
);
}
}
exportdefaultTest;
希望本文所述对大家react程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。