react中如何使用动画效果

在react中想要加入动画效果

需要引入 

import {CSSTransitionGroup} from 'react-transition-group'
//加入react 动画包
import img from './img/a.jpg' //引入图片 svg也是一样
import PropTypes from "prop-types"; //载入prop-types包 
//作用 ：用来规范传递的props的属性

 <CSSTransitionGroup
          transitionName={{'enter':'slideInLeft','leave':'slideOutLeft'}}
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}> //动画标签组件 加入属性
      {
        this.state.flag?<div className='animated'>asdfasdf <One /></div>:''
        
      }
  </CSSTransitionGroup>

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.scss';
import PropTypes from "prop-types";
//载入proptypes包 可以用来实现子孙组件的传值 不需要通过中间的组件(子组件)
//不需要下载
import One from "./One"
import { CSSTransitionGroup } from 'react-transition-group' // ES6
//动画包 需要下载
import img from "./img/a.jpg"
//引入图片
class App extends Component {
  constructor(props){
      super(props);
      this.state={
        flag:true
      }
      this.change=this.change.bind(this)
  }
  change(){
    this.setState({
       flag:!this.state.flag
    })
  }
  getChildContext(){
     return {
        n:5
     }
  }
  render() {    
    return (
      <div className="App">
      <p>asdf
        <img src={img} />
      </p>
      <button onClick={this.change}>change</button>
      <CSSTransitionGroup
          transitionName={{'enter':'slideInLeft','leave':'slideOutLeft'}} //可以替换成一个字符串 样式在css里面写入
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>
      {
        this.state.flag?<div className='animated'>asdfasdf <One /></div>:''
        //className 必须写animated 在transitionName是对象的形式。
      }
      </CSSTransitionGroup>
        
      </div>
    )
  }
}
          
export default App;

App.childContextTypes={
    n:PropTypes.number//规定了App.里给孙组件传值的值类型为Number类型 
}