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類型 
}