【学习笔记 】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 (
            
               
hello App
                toggole
            
        )
    }
    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 (
            
                 {el.style.color = 'blue'}}
                    // 第一次显示hello的时候，增加一个class fade-active
                    appear={true}
                >
                    
hello App
                
                toggole
            
        )
    }
    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 (
            
                
                    {
                        this.state.list.map((item, index) =>{
                            return (
                                 {el.style.color = 'blue'}}
                                    // 第一次显示hello的时候，增加一个class fade-active
                                    appear={true}
                                    key={index}
                                >
                                    
{item}
                                
                            )
                        })
                    }
                
                toggole
            
        )
    }
    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

（完）