React动画

2023-01-22 本文已影响0人 YiYa_咿呀

1. React过渡动画

在React中我们可以通过原生的CSS来实现过渡动画，
但是React社区为我们提供了react-transition-group帮助我们快速过渡动画

2. 动画组件：

Transition
- 该组件是一个和平台无关的组件（不一定要结合CSS）；
- 在前端开发中，我们一般是结合CSS来完成样式，所以比较常用的是CSSTransition；
CSSTransition
- 在前端开发中，通常使用CSSTransition来完成过渡动画效果
SwitchTransition
- 两个组件显示和隐藏切换时，使用该组件
TransitionGroup
- 将多个动画组件包裹在其中，一般用于列表中元素的动画；

1.1 原生CSS实现动画

原生CSS一般是通过state转换为props再结合style-conponents以及逻辑完成动画

const StyleDiv  = styled.div`
  width: ${props => props.width};
  height: ${props => props.height};
  background: skyblue;
  opacity: ${props => props.opacity};
  transition: all 3s;
`
class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            width: 0,
            height: 0,
            opacity:0
        }
    }
    render(){
        return (
            <div>
                <StyleDiv {...this.state}></StyleDiv>
                <button onClick={()=>{this.btnClick()}}>按钮</button>
            </div>
        );
    }
    btnClick(){
        this.setState({
            width: '100px',
            height: '100px',
            opacity:1
        })
    }
}
export default App;

1.2 CSSTransition容器组件

在前端开发中，通常使用CSSTransition来完成过渡动画效果

如何通过CSSTransition来实现过渡效果?
1.1 安装react-transition-group
npm install react-transition-group --save
1.2 从安装好的库中导入CSSTransition
import {CSSTransition} from 'react-transition-group';
1.3利用CSSTransition将需要执行过渡效果的组件或元素包裹起来
1.4 编写对应的CSS动画
实现: .-enter/ .-enter-active / .-enter-done/.-exit/ .-exit-active / .-exit-done
1.5给CSSTransition添加一些属性
in属性 :
取值是一个布尔值, 如果取值为false表示触发退出动画, 如果取值是true表示触发进入动画
classNames属性:
指定动画类名的前缀
timeout属性 :
设置动画超时时间

3.CSSTransition状态

CSSTransition有三个状态：
- appear: 初始
- enter : 进入
- exit；: 退出
当组件第一次加载时候会自动查找
-appear / -appear-active / -appear-done
当组件显示时会自动查找
-enter / -enter-active / -enter-done
当组件退出时会自动查找
-exit / -exit-active / -exit-done
4.unmountOnExit:
unmountOnExit如果取值为true, 那么表示退出动画执行完毕之后删除对应的元素

import React from 'react';
import './App.css'
import {CSSTransition} from 'react-transition-group';
class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isShow: false
        }
    }
    render(){
        return (
            <div>
                <CSSTransition in={this.state.isShow}
                                classNames={'box'}
                                timeout={3000}
                                appear
                                unmountOnExit={true}>
                    <div></div>
                </CSSTransition>
                <button onClick={()=>{this.btnClick()}}>显示</button>
            </div>
        );
    }
    btnClick(){
        this.setState({
            isShow: true
        })
    }
}
export default App;

.box-enter{
    /*进入动画执行之前绑定的类名*/
    width: 0;
    height: 0;
    opacity: 0;
    background: skyblue;
}
.box-enter-active{
    /*进入动画执行过程中绑定的类名*/
    width: 100px;
    height: 100px;
    opacity: 1;
    transition: all 3s;
}
.box-enter-done{
    /*进入动画执行完毕之后绑定的类名*/
    width: 100px;
    height: 100px;
    opacity: 1;
    background: red;
}
.box-exit{
    /*退出动画执行之前绑定的类名*/
    width: 100px;
    height: 100px;
    opacity: 1;
    background: red;
}
.box-exit-active{
    /*退出动画执行过程中绑定的类名*/
    width: 0;
    height: 0;
    opacity: 0;
    transition: all 3s;
}
.box-exit-done{
    /*退出动画执行完毕之后绑定的类名*/
    width: 0;
    height: 0;
    opacity: 0;
    background: skyblue;
}
.box{
    width: 100px;
    height: 100px;
    background: skyblue;
}

.box-appear{
    /*初始化动画执行之前绑定的类名*/
    width: 0;
    height: 0;
    opacity: 0;
    background: skyblue;
}
.box-appear-active{
    /*初始化动画执行过程中绑定的类名*/
    width: 100px;
    height: 100px;
    opacity: 1;
    transition: all 3s;
}
.box-appear-done{
    /*初始化动画执行完毕之后绑定的类名*/
    width: 100px;
    height: 100px;
    opacity: 1;
    background: red;
}

2. transition 回调函数

生命周期方法
- onEnter/onEntering/onEntered
- onExit/onExiting/onExited

import React from 'react';
import './App.css'
import {CSSTransition} from 'react-transition-group';
class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isShow: true
        }
    }
    render(){
        return (
            <div>
                <CSSTransition in={this.state.isShow}
                                classNames={'box'}
                                timeout={3000}
                                unmountOnExit={true}
                                appear
                                onEnter = {this.myFn}
                               onEntering={()=>{console.log('进入动画执行过程中');}}
                               onEntered={()=>{console.log('进入动画执行完毕');}}
                >
                    <div className={'box'}></div>
                </CSSTransition>
                <button onClick={()=>{this.btnClick1()}}>显示</button>
                <button onClick={()=>{this.btnClick2()}}>隐藏</button>
            </div>
        );
    }
    myFn(currentEl, isAppear){
        // console.log(currentEl, isAppear);
        console.log('进入动画开始之前');
    }
    btnClick1(){
        this.setState({
            isShow: true
        })
    }
    btnClick2(){
        this.setState({
            isShow: false
        })
    }
}
export default App;

image.png

3. Transition

SwitchTransition

SwitchTransition可以完成组件切换的动画
SwitchTransition组件里面要有CSSTransition或者Transition组件，不能直接包裹你想要切换的组件
SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态, 取而代之的是key属性

import React from 'react';
import './App.css'
import {CSSTransition, SwitchTransition} from 'react-transition-group';
class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isOn: true
        }
    }
    render(){
        return (
            <div>
                <SwitchTransition mode={'in-out'}>
                    <CSSTransition key={this.state.isOn}
                                   timeout={3000}
                                    classNames={'btn'}>
                        <button onClick={()=>{this.setState({isOn: !this.state.isOn})}}>{this.state.isOn ? 'on' : 'off'}</button>
                    </CSSTransition>
                </SwitchTransition>
            </div>
        );
    }
}
export default App;

import React from 'react';
import './App.css'
import {CSSTransition, TransitionGroup} from 'react-transition-group';

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            // heroList : ['鲁班', '鲁班', '鲁班']
            heroList:[
                {id:1, name:'鲁班'},
                {id:2, name:'虞姬'},
                {id:3, name:'黄忠'},
            ]
        }
    }
    render(){
        return (
            <div>
                <ul>
                    <TransitionGroup>
                    {
                        /*
                        注意点:
                        在企业开发中一定要保证CSSTransition key的唯一性
                        * */
                        this.state.heroList.map((obj, index) =>{
                            return (
                                <CSSTransition key={obj.id}
                                               timeout={3000}
                                               classNames={'item'}>
                                    <li onClick={()=>{this.removeHero(index)}}>{obj.name}</li>
                                </CSSTransition>
                            )
                        })
                    }
                    </TransitionGroup>
                </ul>
                <button onClick={()=>{this.btnClick()}}>新增</button>
            </div>
        );
    }
    btnClick(){
        this.setState({
            // heroList: [...this.state.heroList, '阿珂']
            heroList: [...this.state.heroList, {id: this.state.heroList.length + 1, name:'阿珂'}]
        })
    }
    removeHero(index){
        // console.log(index);
        const list = this.state.heroList.filter((name, idx) =>{
            return idx !== index;
        })
        // console.log(list);
        this.setState({
            heroList: list
        })
    }
}
export default App;

React动画

1.1 原生CSS实现动画

1.2 CSSTransition容器组件

2. transition 回调函数

3. Transition

猜你喜欢

热点阅读