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={}

          transitionLeaveTimeout={}> //动画标签组件 加入属性

      {

        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:

     }

  }

  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={}

          transitionLeaveTimeout={}>

      {

        this.state.flag?<div className='animated'>asdfasdf <One /></div>:''

        //className 必须写animated 在transitionName是对象的形式。

      }

      </CSSTransitionGroup>

      </div>

    )

  }

}

export default App;

App.childContextTypes={

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

}