react基础（8）—— 动画

import React ,{Component} from "react";
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6

import "./css/index.css";

/*
  1. transitionName="example" 
  2. transitionName={ {
    enter: '自定义入场动画',
    leave: '自定义出场动画',
   } }>

 */

class App extends Component{
  constructor(props) {
    super(props);
  
    this.state = {
      list:[]
    };
  }
  render(){
    return <div>
      <input type="text" ref="mytext"/>
      <button onClick={this.handleClick.bind(this)}>add</button>

      <ul>
{/*      <ReactCSSTransitionGroup
                transitionName="kerwin"
                transitionEnterTimeout={500}
                transitionLeaveTimeout={300}>*/}
         <ReactCSSTransitionGroup
                transitionName={ {
            enter: 'bounce-enter-active',
            leave: 'bounce-leave-active',
           } }
                transitionEnterTimeout={500}
                transitionLeaveTimeout={300}>        
        {
          this.state.list.map((item,index)=>
            <li key={item}>
              {item}
              <button onClick={this.handleDelClick.bind(this,index)}>del</button>
            </li>
          )
        }
      </ReactCSSTransitionGroup>  
      </ul>
    </div>
  }

  handleClick(){
    // console.log(this.refs.mytext.value);
    //不要直接修改状态
    this.setState({
      list:[...this.state.list,this.refs.mytext.value]
    })
  }

  handleDelClick(index){
    console.log(index);

    // this.state.list.splice
    // var mylist = this.state.list  浅复制
    var mylist =[...this.state.list]; //不修改原来的状态
    mylist.splice(index,1);
    this.setState({
      list:mylist
    })
  }
}

export default App;  

---------------------------------应用--------------------------------------

import React,{Component} from "react";
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6

import "./css/index.css";


class Navbar extends Component{
  render(){
    return <div>
      navbar---<button onClick={this.props.event}>click</button>
    </div>
  }
}

class Sidebar extends Component{
  render(){
    return <div style={{backgroundColor: 'black',color:'white',width:'200px'}}>
      <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111D</li>
      </ul>
    </div>
  }
}



class App extends Component{
  constructor(props) {
    super(props);
  
    this.state = {
      isShow:false
    };
  }

  render(){
    return <div>
      {/*<button onClick={()=>{
        //不能直接修改状态
        this.setState({
          isShow:!this.state.isShow
        })
      }}>click</button>*/}

      <Navbar event={()=>{
        //不能直接修改状态
        this.setState({
          isShow:!this.state.isShow
        })
      }}/>

      <ReactCSSTransitionGroup
             transitionName={ {
         enter: 'bounce-enter-active',
         leave: 'bounce-leave-active',
        } }
             transitionEnterTimeout={500}
             transitionLeaveTimeout={500}>  
      {
        this.state.isShow?
        <Sidebar />:null
      }

      </ReactCSSTransitionGroup>
    </div>
  }
}


export default App;

-------------------------------样式-----------------------------------

.kerwin-enter {
  opacity: 0.01;
  transform: translateX(100px);
}

.kerwin-enter.kerwin-enter-active {
  opacity: 1;
  transform: translateX(0px);

  transition: all 500ms ease-in;
}

.kerwin-leave {
  opacity: 1;
  transform: translateX(0px);

}
.kerwin-leave.kerwin-leave-active {
  opacity: 0.01;
  transform: translateX(100px);

  transition: all 300ms ease-in;
}


.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
  transform: translateX(-100%);
  /*自身的100%*/
  opacity: 0;
}

100% {
  transform: translateX(0px);
  opacity: 1;
}
}