React 动画

一、过渡动画

通过transition显示与隐藏文字

App.jsx组件

import React, { Component,Fragment } from "react";
import "../assets/css/App.css";
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            show:true
         };
         this.handletoggle=this.handletoggle.bind(this)
    }
    handletoggle(){
        this.setState({
            show:this.state.show?false:true
        })
    }
    render() {
        return (
            <Fragment>
                <div className={this.state.show?"show":"hide"}>hello</div>
                <button onClick={this.handletoggle}>toggle</button>
           </Fragment>
        );
    }  
}
export default App;

App.css

.show{
    opacity: 1;
    transition: 1s all ease-in;
}
.hide{
    opacity: 0;
    transition: 1s all ease-in;
}

 二、动画效果

通过animation和@keyframes 定义动画

App.css

.show{
    opacity: 1;
    animation: show-item 2s ease-in  forwards;
    /* forwards 当动画完成后保持最后一个属性值 */
}
.hide{
    opacity: 0;
    animation:hide-item 2s ease-in forwards;
}

@keyframes show-item{
    0% {
        opacity: 0;
        color: red;
    }
    50%{
        opacity: 0.5;
        color: green
    }
    100%{
        opacity: 1;
        color: blue
    }
}

@keyframes hide-item{
    0% {
        opacity: 1;
        color: red;
    }
    50%{
        opacity: 0.5;
        color: green
    }
    100%{
        opacity: 0;
        color: blue
    }
}

三、ReactTransitionGroup插件库

首先要安装

 cnpm install react-transition-group --save

 导入插件库

import {CSSTransition} from "react-transition-group"

学习使用CSStransitionAPI官方文档： 

http://reactcommunity.org/react-transition-group/css-transition

单组动画

import React, { Component,Fragment } from "react";
import "../assets/css/App.css"
import {CSSTransition} from "react-transition-group"
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            show:true
         };
         this.handletoggle=this.handletoggle.bind(this)
    }
    handletoggle(){
        this.setState({
            show:this.state.show?false:true
        })
    }
    render() {
        return (
            <Fragment>
                <CSSTransition
                    in={this.state.show}  //状态
                    timeout={1000}        //动画执行时间
                    classNames="fade"     //动画的类名
                    unmountOnExit         //隐藏删除DOM 显示添加DOM
                    onEnter={(el) =>{el.style.color="red"}}    //生命周期函数  在入场动画结束之后执行
                    onExited={(el) =>{el.style.color="black"} }      //在出场动画结束之后执行
                    appear={true}        //第一次展示页面时就有动画
                >   
                <div>hello</div>           
                </CSSTransition>
                <button onClick={this.handletoggle}>toggle</button>
           </Fragment>
        );
    }  
}
export default App;

 

.fade-enter,.fade-apper{
    opacity: 0;
  }
  .fade-enter-active,.fade-apper-active{
    opacity: 1;
    transition: opacity 2s ease-in;
  }
  .fade-enter-done{
    opacity: 1;
  }

  .fade-exit {
    opacity: 1;
  }
  .fade-exit-active {
    opacity: 0;
    transition: opacity 2s ease-in;
  }
  .fade-exit-done{
    opacity: 0;
  }

多组动画

TransitionGroup结合CSSTransition实现多组动画

导入TransitionGroup

import {CSSTransition,TransitionGroup} from "react-transition-group"

import React, { Component,Fragment } from "react";
import "../assets/css/App.css"
import {CSSTransition,TransitionGroup} from "react-transition-group"
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            // show:true
            list:[]
         };
         this.handletoggle=this.handletoggle.bind(this)
    }
    handletoggle(){
        this.setState({
            // show:this.state.show?false:true
            list:[...this.state.list,"item"]
        })
    }
    render() {
        return (
            <Fragment>
                <TransitionGroup>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                        <CSSTransition
                            // in={this.state.show}  //状态
                            timeout={1000}        //动画执行时间
                            classNames="fade"     //动画的类名
                            unmountOnExit         //隐藏删除DOM 显示添加DOM
                            onEnter={(el) =>{el.style.color="red"}}    //生命周期函数  在入场动画结束之后执行
                            onExited={(el) =>{el.style.color="black"} }      //在出场动画结束之后执行
                            appear={true}        //第一次展示页面时就有动画
                            key={index}
                        >   
                        <div>{item}</div>           
                        </CSSTransition>
                            )
                        })
                    }
               
                </TransitionGroup>
                <button onClick={this.handletoggle}>toggle</button>
           </Fragment>
        );
    }  
}
export default App;