React中过渡动画的编写方式

川长思鸟来 2023-10-02 20:56 15阅读 0赞

#### 文章目录 ####

*   *  React的过渡动画
     *   *  过渡动画库的介绍
         *  CSSTransition(掌握)
         *  SwitchTransition(了解)
         *  TransitionGroup(了解)

### React的过渡动画 ###

#### 过渡动画库的介绍 ####

**在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验**。

**当然，我们可以通过原生的CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group用来完成过渡动画。**

**React曾为开发者提供过动画插件 react-addons-css-transition-group，后由社区维护，形成了现在的 react-transition- group**。

> 这个库可以帮助我们方便的实现组件的入场和离场动画，使用时需要进行额外的安装:
> 
> \# npm
> 
> `npm install react-transition-group --save`
> 
> \# yarn
> 
> `yarn add react-transition-group`

**react-transition-group本身非常小，不会为我们应用程序增加过多的负担**。

**react-transition-group主要`包含四个组件`**:

**Transition**(*了解*)

> 该组件是一个和平台无关的组件(不一定要结合CSS);
> 
> 在前端开发中，我们一般是结合CSS来完成样式，所以比较常用的是CSSTransition;

**CSSTransition**

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

**SwitchTransition**

> 两个组件显示和隐藏切换时，使用该组件

**TransitionGroup**

> 将多个动画组件包裹在其中，一般用于列表中元素的动画;

--------------------

#### CSSTransition(掌握) ####

**CSSTransition是基于Transition组件构建的**:

**CSSTransition执行过程中，有三个状态:appear、enter、exit**;

**每个状态又有三种状态，需要定义对应的CSS样式**:

> 第一类, 开始状态: 对应的类是-appear、-enter、-exit;
> 
> 第二类, 执行动画: 对应的类是-appear-active、-enter-active、-exit-active;
> 
> 第三类, 执行结束: 对应的类是-appear-done、-enter-done、-exit-done;

\*\*CSSTransition常见对应的属性: \*\*

**in:触发进入或者退出状态**

> 如果添加了`unmountOnExit={true}`，那么该组件会在执行退出动画结束后被移除掉;
> 
> 当in为true时，触发进入状态，会添加-enter、-enter-acitve的class开始执行动画，当动画执行结束后，会移除两个class， 并且添加-enter-done的class;
> 
> 当in为false时，触发退出状态，会添加-exit、-exit-active的class开始执行动画，当动画执行结束后，会移除两个class，并 且添加-enter-done的class;

**classNames:动画class的名称**

> 决定了在编写css时，对应的class名称
> 
> 比如card-enter、card-enter-active、card-enter-done;

**timeout**:

> 过渡动画的时间, 最好和css中的时间保持一致

**appea**:

> 是否在初次进入添加动画(需要和in同时为true)

**unmountOnExit:退出后卸载组件**

其他属性可以参考官网来学习:[https://reactcommunity.org/react-transition-group/transition][https_reactcommunity.org_react-transition-group_transition]

export class App extends PureComponent {
        
      constructor() {
        
        super()
    
        this.state = {
        
          isShow: false
        }
      }
    
      render() {
        
        const {
         isShow } = this.state
    
        return (
          <div>
            <button onClick={
        () => this.setState({
         isShow: !isShow })}>切换</button>
            {
        /* timeout和unmountOnExit是必须要加的 */}
            <CSSTransition timeout={
        2000} unmountOnExit={
        true} in={
        isShow} classNames="abc">
              <h2>哈哈哈</h2>
            </CSSTransition>
          </div>
        )
      }
    }

/* 要进入的状态 */
    .abc-enter {
        
      opacity: 0;
    }
    
    /* 进入过程的状态 */
    .abc-enter-active {
        
      opacity: 1;
      transition: opacity 2s ease;
    }
    
    /* 要离开的状态 */
    .abc-exit {
        
      opacity: 1;
    }
    
    /* 离开过程的状态 */
    .abc-exit-active {
        
      opacity: 0;
      transition: opacity 2s ease;
    }

**CSSTransition对应的钩子函数:主要为了检测动画的执行过程，来完成一些JavaScript的操作**

> onEnter:在进入动画之前被触发;
> 
> onEntering:在应用进入动画时被触发;
> 
> onEntered:在应用进入动画执行结束后被触发;
> 
> onExit: 在离开动画之前触发;
> 
> onExiting: 在应用离开动画时被触发
> 
> onExited: 在应用离开动画执行结束后被触发

<CSSTransition 
      timeout={
        2000} 
      unmountOnExit={
        true}
      in={
        isShow} 
      classNames="abc"
      onEnter={
        () => console.log("准备开始执行进入动画")}
      onEntering={
        () => console.log("执行进入动画")}
      onEntered={
        () => console.log("进入动画执行结束")}
      onExit={
        () => console.log("准备开始执行离开动画")}
      onExiting={
        () => console.log("执行离开动画")}
      onExited={
        () => console.log("离开动画执行结束")}
    >
      <h2>哈哈哈</h2>
    </CSSTransition>

--------------------

#### SwitchTransition(了解) ####

**SwitchTransition可以完成两个组件之间切换的炫酷动画**:

> 比如我们有一个按钮需要在on和off之间切换，我们希望看到on先从左侧退出，off再从右侧进入;
> 
> 这个动画在vue中被称之为 vue transition modes;
> 
> react-transition-group中使用SwitchTransition来实现该动画;

**SwitchTransition中主要有一个属性:mode，有两个值**

> in-out:表示新组件先进入，旧组件再移除;
> 
> out-in:表示旧组件先移除，新组件再进入;

**如何使用SwitchTransition呢?**

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

export class App extends PureComponent {
        
      constructor() {
        
        super()
    
        this.state = {
        
          isOn: true
        }
      }
    
      render() {
        
        const {
         isOn } = this.state
    
        return (
          <div>
            <SwitchTransition mode='out-in'>
              <CSSTransition 
                timeout={
        1000} 
                unmountOnExit={
        true} 
                key={
        isOn ? "ON" : "OFF"}
                classNames="handoff"
              >
                <button onClick={
        () => this.setState({
         isOn: !isOn })}>
                  {
        isOn ? "ON" : "OFF"}
                </button>
              </CSSTransition>
            </SwitchTransition>
          </div>
        )
      }
    }

.handoff-enter {
        
      transform: translateX(100px);
      opacity: 0;
    }
    
    .handoff-enter-active {
        
      transform: translateX(0);
      opacity: 1;
      transition: all 1s linear;
    }
    
    .handoff-exit {
        
      transform: translateX(0);
      opacity: 1;
    }
    
    .handoff-exit-active {
        
      transform: translateX(-100px);
      opacity: 0;
      transition: all 1s linear;
    }

--------------------

#### TransitionGroup(了解) ####

**当我们有一组动画时，需要将这些CSSTransition放入到一个TransitionGroup中来完成动画**:

export class App extends PureComponent {
        
      constructor() {
        
        super()
    
        this.state = {
        
          students: [
            {
        name: "aaa", age: 18},
            {
        name: "bbb", age: 19},
            {
        name: "ccc", age: 20},
            {
        name: "ddd", age: 21}
          ]
        }
      }
    
      changeStudent(add = true, index) {
        
        const students = [...this.state.students]
        if(add) {
        
          students.push({
        name: new Date().getTime(), age: 22})
        } else {
        
          students.splice(index, 1)
        }
        this.setState({
         students })
      }
    
      render() {
        
        const {
         students } = this.state
    
        return (
          <div>
            <h3>学生信息</h3>
            {
        /* component控制渲染成什么元素, 默认为div */}
            <TransitionGroup component="ul">
              {
        
                students.map((item, index) => {
        
                  return (
                    <CSSTransition key={
        item.name} classNames="stu" timeout={
        1000}>
                      <li>
                        <span>姓名: {
        item.name} - 年龄: {
        item.age}</span>
                        <button onClick={
        () => this.changeStudent(false, index)}>删除</button>
                      </li>
                    </CSSTransition>
                  )
                })
              }
            </TransitionGroup>
            <button onClick={
        () => this.changeStudent()}>添加学生信息</button>
          </div>
        )
      }
    }

.stu-enter {
        
      transform: translateX(100px);
      opacity: 0;
    }
    
    .stu-enter-active {
        
      transform: translateX(0);
      opacity: 1;
      transition: all 1s ease;
    }
    
    .stu-exit {
        
      transform: translateX(0);
      opacity: 1;
    }
    
    .stu-exit-active {
        
      transform: translateX(100px);
      opacity: 0;
      transition: all 1s ease;
    }

[https_reactcommunity.org_react-transition-group_transition]: https://reactcommunity.org/react-transition-group/transition