• 借助transition實現(xiàn)漸隱漸現(xiàn)
• 通過@keyframes定義一些動畫效果
• 使用react-transition-group實現(xiàn)動畫

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
                    // 入場動畫結(jié)束之后（鉤子函數(shù)，做一些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;

動畫和鉤子函數(shù)的對應(yīng)情況,可在對應(yīng)的鉤子函數(shù)中進行JS操作

.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

如果實現(xiàn)更底層的動畫效果可以使用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
                                    // 入場動畫結(jié)束之后
                                    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

（完）