动画

官方文档

准备

• 引入包

  npm install react-transition-group --save

CSSTransition

1. 引入 react-transition-group 包

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

2. 使用 CSSTransition 包裹

   <CSSTransition>
   	<div>animation</div>
   </CSSTransition>

3. 使用对应的属性完成对应的功能

   <CSSTransition
   	in={this.state.show}  
   	timeout={1000}
   	classNames='fade'
   	unmountOnExit
   >
   </CSSTransition>

   • in: boolean

   1. 用来判断是隐藏或显示
   2. true为显示，false为隐藏

   • timeout: number —— 动画执行的时间
   • className: string —— 动画class的前缀名

   1. 以下时在css文件中使用的class
   2. .fade-enter —— 入场动画的第一帧
   3. .fade-enter-active —— 入场动画的第二帧到动画结束
   4. .fade-enter-done —— 动画执行完成后
   5. .fade-exit —— 出场动画的第一帧
   6. .fade-exit-active —— 出场动画的第二帧到动画结束
   7. .fade-exit-done —— 动画执行完成后

   • unmountOnExit ——隐藏会移除这个dom
   • appear: boolean —— 页面渲染时是否执行动画

   1. 以下时在css文件中使用的class
   2. .fade-appear —— 第一次渲染动画的第一帧，一般css和.fade-enter一样
   3. .fade-appear-active —— 第一次渲染动画的第二帧到动画结束，一般css和.fade-enter-active一样

例子

import React, { Component, Fragment } from 'react'
import { CSSTransition } from 'react-transition-group'
import './style.css'

class Test extends Component {
    constructor(props){
        super(props)
        this.state = {
            show: true
        }
    }
    render(){
        return (
            <Fragment>
                <CSSTransition
                    in={this.state.show}
                    timeout={1000}
                    classNames='fade'
                    unmountOnExit
                    apper={true}
                >
                    <div>animation</div>
                </CSSTransition>
                <button onClick={this.change}>change</button>
            </Fragment>
        )
    }
    change = () => {
        this.setState((prevState) => ({show: prevState.show ? false : true}))
    }
}

.fade-enter, .fade-appear{
    opacity: 0;
}
.fade-enter-active, .fade-appear-active{
    opacity: 1;
    transition: all 1s ease-in;
}
.fade-enter-done{
    opacity: 1;
}
.fade-exit{
    opacity: 1;
}
.fade-exit-active{
    opacity: 0;
    transition: all 1s ease-in;
}
.fade-exit-done{
    opacity: 0;
}

TransitionGroup

列表过渡

• 使用 TransitionGroup 包裹一个个 CSSTransition