react——动画 react-transition-group

安装

yarn add react-transition-group

使用

动画样式

/* 入场动画 */
.fade-enter, .fade-appear {
  opacity: 0;
}

.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;
}

单元素动画

引入

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

 <Fragment>
    <CSSTransition
    	// 动画执行触发
        in={this.state.show}
        timeout={800}
        // 对应 css 样式的前缀
        classNames="fade"
        // DOM 移除
        unmountOnExit
        // 通过 js 设置动画
        onEntered={(el) => {
            el.style.color = 'red'
        }}
        // 页面打开时就执行动画，css 需要设置 .fade-appear 相应样式
        appear={true}
    >
        <div>hello</div>
    </CSSTransition>
    <button onClick={this.toggle}>toggle</button>
</Fragment>

toggle() {
    this.setState(() => {
        let flag = !this.state.show
        return {
            show: flag
        }
    })
}

多元素列表动画

引入

import {
    CSSTransition,
    TransitionGroup,
} from 'react-transition-group';

<Fragment>
    <button onClick={this.toggle}>toggle</button>
    <TransitionGroup>
    {
        this.state.list.map((item, i) => {
            return (
                <CSSTransition
                    timeout={800}
                    // 对应 css 样式的前缀
                    classNames="fade"
                    // DOM 移除
                    unmountOnExit
                    // 通过 js 设置动画
                    onEntered={(el) => {
                        el.style.color = 'red'
                    }}
                    // 页面打开时就执行动画，css 需要设置 .fade-appear 相应样式
                    appear={true}
                    key={i}
                >
                    <div>{item}</div>
                </CSSTransition>
            )
        })
    }
    </TransitionGroup>
</Fragment>

toggle() {
    this.setState((prevState) => {
        return { list: [...prevState.list, 'hello'] }
    })
}