react基础(8)—— 动画
1 import React ,{Component} from "react"; 2 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6 3 4 import "./css/index.css"; 5 6 /* 7 1. transitionName="example" 8 2. transitionName={ { 9 enter: '自定义入场动画', 10 leave: '自定义出场动画', 11 } }> 12 13 */ 14 15 class App extends Component{ 16 constructor(props) { 17 super(props); 18 19 this.state = { 20 list:[] 21 }; 22 } 23 render(){ 24 return <div> 25 <input type="text" ref="mytext"/> 26 <button onClick={this.handleClick.bind(this)}>add</button> 27 28 <ul> 29 {/* <ReactCSSTransitionGroup 30 transitionName="kerwin" 31 transitionEnterTimeout={500} 32 transitionLeaveTimeout={300}>*/} 33 <ReactCSSTransitionGroup 34 transitionName={ { 35 enter: 'bounce-enter-active', 36 leave: 'bounce-leave-active', 37 } } 38 transitionEnterTimeout={500} 39 transitionLeaveTimeout={300}> 40 { 41 this.state.list.map((item,index)=> 42 <li key={item}> 43 {item} 44 <button onClick={this.handleDelClick.bind(this,index)}>del</button> 45 </li> 46 ) 47 } 48 </ReactCSSTransitionGroup> 49 </ul> 50 </div> 51 } 52 53 handleClick(){ 54 // console.log(this.refs.mytext.value); 55 //不要直接修改状态 56 this.setState({ 57 list:[...this.state.list,this.refs.mytext.value] 58 }) 59 } 60 61 handleDelClick(index){ 62 console.log(index); 63 64 // this.state.list.splice 65 // var mylist = this.state.list 浅复制 66 var mylist =[...this.state.list]; //不修改原来的状态 67 mylist.splice(index,1); 68 this.setState({ 69 list:mylist 70 }) 71 } 72 } 73 74 export default App;
---------------------------------应用--------------------------------------
1 import React,{Component} from "react"; 2 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6 3 4 import "./css/index.css"; 5 6 7 class Navbar extends Component{ 8 render(){ 9 return <div> 10 navbar---<button onClick={this.props.event}>click</button> 11 </div> 12 } 13 } 14 15 class Sidebar extends Component{ 16 render(){ 17 return <div style={{backgroundColor: 'black',color:'white',width:'200px'}}> 18 <ul> 19 <li>1111</li> 20 <li>1111</li> 21 <li>1111</li> 22 <li>1111</li> 23 <li>1111D</li> 24 </ul> 25 </div> 26 } 27 } 28 29 30 31 class App extends Component{ 32 constructor(props) { 33 super(props); 34 35 this.state = { 36 isShow:false 37 }; 38 } 39 40 render(){ 41 return <div> 42 {/*<button onClick={()=>{ 43 //不能直接修改状态 44 this.setState({ 45 isShow:!this.state.isShow 46 }) 47 }}>click</button>*/} 48 49 <Navbar event={()=>{ 50 //不能直接修改状态 51 this.setState({ 52 isShow:!this.state.isShow 53 }) 54 }}/> 55 56 <ReactCSSTransitionGroup 57 transitionName={ { 58 enter: 'bounce-enter-active', 59 leave: 'bounce-leave-active', 60 } } 61 transitionEnterTimeout={500} 62 transitionLeaveTimeout={500}> 63 { 64 this.state.isShow? 65 <Sidebar />:null 66 } 67 68 </ReactCSSTransitionGroup> 69 </div> 70 } 71 } 72 73 74 export default App;
-------------------------------样式-----------------------------------
1 .kerwin-enter { 2 opacity: 0.01; 3 transform: translateX(100px); 4 } 5 6 .kerwin-enter.kerwin-enter-active { 7 opacity: 1; 8 transform: translateX(0px); 9 10 transition: all 500ms ease-in; 11 } 12 13 .kerwin-leave { 14 opacity: 1; 15 transform: translateX(0px); 16 17 } 18 .kerwin-leave.kerwin-leave-active { 19 opacity: 0.01; 20 transform: translateX(100px); 21 22 transition: all 300ms ease-in; 23 } 24 25 26 .bounce-enter-active { 27 animation: bounce-in .5s; 28 } 29 .bounce-leave-active { 30 animation: bounce-in .5s reverse; 31 } 32 @keyframes bounce-in { 33 0% { 34 transform: translateX(-100%); 35 /*自身的100%*/ 36 opacity: 0; 37 } 38 39 100% { 40 transform: translateX(0px); 41 opacity: 1; 42 } 43 }