react 动画react-transition-group使用介绍

react-transition-group

yarn add react-transition-group

CSSTransition

• in：如果this.state.show从false变为true，则动画入场，反之out
• mountOnEnter：默认false 即使in 是false 组件也会正常加载，如果是true则不会加载，只会在in为true时加载
• appear：默认false 加载后自动执行
• enter：默认false 是否开启进入转换(关闭后不进入entering状态，直接进入entered状态)appear 为true时此设置不会生效
• exit：默认true 是否开启退出转换，与enter相反
• timeout={1000} 动画执行1秒
• unmountOnExit 默认false 当动画出场后在页面上移除包裹的dom节点 但是 componentWillUnmount componentDidMount等创建不会触发
• addEndListener 手动触发动画结束状态
• onEnter进入entering状态之前触发的回调, 在第一次mount时会传入isAppearing判断是否开启appear
• onEntering 进入动画开始到结束的过程中
• onEntered 进入动画完成
• onExit 结束动画触发钱
• onExiting 结束动画开始到结束的过程中
• onExited 结束动画完成

使用CSSTransition Demo：

import React, { Component } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import './reacttransition.css'
export default class Reacttransition extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
        }
    }

    click() {
        this.setState({
            show: this.state.show ? false : true
        })
    }
    render() {
        return (
            <div>
                <input type='button' value='切换' onClick={this.click.bind(this)} />
                <CSSTransition
                    in={this.state.show} // 如果this.state.show从false变为true，则动画入场，反之out出场
                    mountOnEnter={this.state.show}//默认false 即使in 是false 组件也会正常加载，如果是true则不会加载，只会在in为true时加载
                    appear={this.state.show}//默认false 加载后自动执行
                    enter={this.state.show}//默认false 是否开启进入转换(关闭后不进入entering状态，直接进入entered状态)appear 为true时此设置不会生效
                    exit={this.state.show}//默认true 是否开启退出转换，与enter相反
                    timeout={1000} //动画执行1秒
                    classNames='fade' //自定义的class名
                    unmountOnExit//可选，默认false 当动画出场后在页面上移除包裹的dom节点 但是 componentWillUnmount componentDidMount等创建不会触发
                    addEndListener={(node, done) => {
                        //手动触发动画结束状态
                    }}
                    onEnter={(el) => {//进入entering状态之前触发的回调, 在第一次mount时会传入isAppearing判断是否开启appear
                        el.style.color = 'blue'   //可选，动画入场之后的回调，el指被包裹的dom，让div内的字体颜色等于蓝色
                        alert('进入前')
                    }}
                    onEntering={(el) => {//进入动画开始到结束的过程中
                        alert('进入中')
                    }}
                    onEntered={(el) => {//进入动画完成
                        alert('进入后')
                    }}
                    onExit={(el) => {//结束动画触发钱
                        alert('准备离开')
                    }}
                    onExiting={(el) => {//结束动画开始到结束的过程中
                        alert('离开中')
                    }}
                    onExited={() => {
                        alert('离开后')   //结束动画完成
                    }}
                >
                    <div>hello,react</div>
                </CSSTransition>
            </div>
        )
    }
}

reacttransition CSS 样式：

/* //enter是入场前的刹那（点击按钮），appear指页面第一次加载前（自动） */
.fade-enter, .fade-appear {
    opacity: 0;
}
/* //enter-active指入场后到入场结束的过程，appear-active则是页面第一次加载自动执行 */
.fade-enter-active, .fade-appear-active { 
    opacity: 1;
    transition: opacity 1s ease-in;
}
/* //入场动画执行完毕 */
.fade-enter-done {
    opacity: 1;
}
/* //同上*/
.fade-exit {
    opacity: 1;
}

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

.fade-exit-done {
    opacity: 0;
}

/* .fade-appear    */
 /* 初次进入前的状态, 注意在初次进入时，appear和 enter 相关的类名会在第一次动画时同时生效 */
/* .fade-appear-active     */
 /* 初次进入中的状态 */
/* .fade-appear-done     */
 /* 初次进入后的状态 */

/* .fade-enter             */
 /* 开始过渡时生效,元素被插入前 */
/* .fade-enter-active      */
/* 开始过渡时的状态 */
/* .fade-enter-done        */
/* 过渡结束后的状态 */

/* .fade-exit              */
/* 离开过渡的开始状态,元素被插入前 */
/* .fade-exit-active       */
 /* 离开过渡生效时的状态 */
/* .fade-exit-done         */
 /* 离开过渡的结束状态 */

TransitionGroup 控制多个,样式同上：

import React, { Component } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import './reacttransition.css'
export default class Reacttransition extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [
            ]
        }
    }
    render() {
        const { items } = this.state;
        return (
            <div>
                <TransitionGroup className="todo-list">
                    {items.map(({ id, text }) => (
                        <CSSTransition
                            key={id}
                            timeout={500}
                            classNames="fade"
                        >
                            <div>
                                <div
                                    onClick={() => {
                                        this.setState(state => ({
                                            items: state.items.filter(
                                                item => item.id !== id
                                            ),
                                        }));
                                    }}
                                >
                                    删除
                                </div>
                                {text}
                            </div>
                        </CSSTransition>
                    ))}
                </TransitionGroup>
                <div
                    onClick={() => {
                        const text = prompt('add');
                        if (text) {
                            this.setState(state => ({
                                items: [
                                    ...state.items,
                                    { id: Math.random(), text },
                                ],
                            }));
                        }
                    }}
                >
                    Add
        </div>
            </div>
        )
    }
}