【学习笔记 】React ⑤ 动画效果

• 借助transition实现渐隐渐现
• 通过@keyframes定义一些动画效果
• 使用react-transition-group实现动画

transition

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

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

动画-transition.gif

keyframes

.show {
animation: show-item 2s ease-in forwards;
}
.hide {
animation: hide-item 2s ease-in forwards;
}
@keyframes hide-item{
0% {
opacity: 1;
color: red;
}
50% {
opacity: 0.5;
color: green;
}
100% {
opacity: 0;
color: blue;
}
}
@keyframes show-item{
0% {
opacity: 0;
color: red;
}
50% {
opacity: 0.5;
color: green;
}
100% {
opacity: 1;
color: blue;
}
}

动画-keyframes.gif

react-transition-group

文档地址：https://reactcommunity.org/react-transition-group/

yarn add react-transition-group

1.对单个元素进行使用动画效果

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

import React, {Component, Fragment} from 'react';
import { CSSTransition } from 'react-transition-group'
class App extends Component{
    constructor(props) {
        super(props)
        this.state = {
             show: true
        }
        this.handleToggole = this.handleToggole.bind(this)
    }
    render() {
        return (
            <Fragment>
                <CSSTransition
                    in={this.state.show}
                    timeout={1000}
                    classNames='fade'
                    unmountOnExit
                    // 入场动画结束之后（钩子函数，做一些JS操作）
                    onEntered={(el) => {el.style.color = 'blue'}}
                    // 第一次显示hello的时候，增加一个class fade-active
                    appear={true}
                >
                    <div>hello App</div>
                </CSSTransition>
                <button onClick={this.handleToggole}>toggole</button>
            </Fragment>
        )
    }
    handleToggole() {
        this.setState({
            show: this.state.show ? false : true
        })
    }
}
export default App;

动画和钩子函数的对应情况,可在对应的钩子函数中进行JS操作

CSS	钩子函数
fade-enter	onEnter()
fade-enter-active	onEntering()
fade-enter-done	onEntered()
fade-exit	onExit()
fade-exit-active	onExiting()
fade-exit-done	onExited()

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

动画-单个元素.gif

如果实现更底层的动画效果可以使用Transition组件使用

2.多个元素进行使用动画效果

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

import React, {Component, Fragment} from 'react';
import { CSSTransition, TransitionGroup} from 'react-transition-group'
class App extends Component{
    constructor(props) {
        super(props)
        this.state = {
            show: true,
            list: []
        }
        this.handleAddItem = this.handleAddItem.bind(this)
    }
    render() {
        return (
            <Fragment>
                <TransitionGroup>
                    {
                        this.state.list.map((item, index) =>{
                            return (
                                <CSSTransition
                                    timeout={1000}
                                    classNames='fade'
                                    unmountOnExit
                                    // 入场动画结束之后
                                    onEntered={(el) => {el.style.color = 'blue'}}
                                    // 第一次显示hello的时候，增加一个class fade-active
                                    appear={true}
                                    key={index}
                                >
                                    <div>{item}</div>
                                </CSSTransition>
                            )
                        })
                    }
                </TransitionGroup>
                <button onClick={this.handleAddItem}>toggole</button>
            </Fragment>
        )
    }
    handleToggole() {
        this.setState({
            show: this.state.show ? false : true
        })
    }
    handleAddItem() {
        this.setState((prevState) => {
            return {
                list: [...prevState.list, '这是添加的～～～']
            }
        })
    }
    // docs:https://reactcommunity.org/react-transition-group/transition-group
}
export default App;

动画-多个元素.gif

（完）