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(); } } exportdefaultTest; {this.input=input}}value={this.state.inputValue}onChange={this.change.bind(this)}/> 添加
{ this.state.list.map((v,i)=>{ return( ); }) }
希望本文所述对大家react程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。