React中過渡動(dòng)畫的編寫方式實(shí)例詳解

更新時(shí)間：2022年10月09日 10:28:44 作者：林有酒

在開發(fā)中我們想要給一個(gè)組件的顯示和消失添加某種過渡動(dòng)畫,可以很好的增加用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于React中過渡動(dòng)畫的編寫方式,需要的朋友可以參考下

React的過渡動(dòng)畫

過渡動(dòng)畫庫(kù)的介紹

在開發(fā)中，我們想要給一個(gè)組件的顯示和消失添加某種過渡動(dòng)畫，可以很好的增加用戶體驗(yàn)。

當(dāng)然，我們可以通過原生的CSS來實(shí)現(xiàn)這些過渡動(dòng)畫，但是React社區(qū)為我們提供了react-transition-group用來完成過渡動(dòng)畫。

React曾為開發(fā)者提供過動(dòng)畫插件 react-addons-css-transition-group，后由社區(qū)維護(hù)，形成了現(xiàn)在的 react-transition- group。

這個(gè)庫(kù)可以幫助我們方便的實(shí)現(xiàn)組件的入場(chǎng)和離場(chǎng)動(dòng)畫，使用時(shí)需要進(jìn)行額外的安裝:

# npm

npm install react-transition-group --save

# yarn

yarn add react-transition-group

react-transition-group本身非常小，不會(huì)為我們應(yīng)用程序增加過多的負(fù)擔(dān)。

react-transition-group主要包含四個(gè)組件:

Transition(了解)

該組件是一個(gè)和平臺(tái)無關(guān)的組件(不一定要結(jié)合CSS);

在前端開發(fā)中，我們一般是結(jié)合CSS來完成樣式，所以比較常用的是CSSTransition;

CSSTransition

在前端開發(fā)中，通常使用CSSTransition來完成過渡動(dòng)畫效果

SwitchTransition

兩個(gè)組件顯示和隱藏切換時(shí)，使用該組件

TransitionGroup

將多個(gè)動(dòng)畫組件包裹在其中，一般用于列表中元素的動(dòng)畫;

CSSTransition(掌握)

CSSTransition是基于Transition組件構(gòu)建的:

CSSTransition執(zhí)行過程中，有三個(gè)狀態(tài):appear、enter、exit;

每個(gè)狀態(tài)又有三種狀態(tài)，需要定義對(duì)應(yīng)的CSS樣式:

第一類, 開始狀態(tài): 對(duì)應(yīng)的類是-appear、-enter、-exit;

第二類, 執(zhí)行動(dòng)畫: 對(duì)應(yīng)的類是-appear-active、-enter-active、-exit-active;

第三類, 執(zhí)行結(jié)束: 對(duì)應(yīng)的類是-appear-done、-enter-done、-exit-done;

**CSSTransition常見對(duì)應(yīng)的屬性: **

in:觸發(fā)進(jìn)入或者退出狀態(tài)

如果添加了unmountOnExit={true}，那么該組件會(huì)在執(zhí)行退出動(dòng)畫結(jié)束后被移除掉;

當(dāng)in為true時(shí)，觸發(fā)進(jìn)入狀態(tài)，會(huì)添加-enter、-enter-acitve的class開始執(zhí)行動(dòng)畫，當(dāng)動(dòng)畫執(zhí)行結(jié)束后，會(huì)移除兩個(gè)class，并且添加-enter-done的class;

當(dāng)in為false時(shí)，觸發(fā)退出狀態(tài)，會(huì)添加-exit、-exit-active的class開始執(zhí)行動(dòng)畫，當(dāng)動(dòng)畫執(zhí)行結(jié)束后，會(huì)移除兩個(gè)class，并且添加-enter-done的class;

classNames:動(dòng)畫class的名稱

決定了在編寫css時(shí)，對(duì)應(yīng)的class名稱

比如card-enter、card-enter-active、card-enter-done;

timeout:

過渡動(dòng)畫的時(shí)間, 最好和css中的時(shí)間保持一致

appea:

是否在初次進(jìn)入添加動(dòng)畫(需要和in同時(shí)為true)

unmountOnExit:退出后卸載組件

其他屬性可以參考官網(wǎng)來學(xué)習(xí):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>
    )
  }
}

/* 要進(jìn)入的狀態(tài) */
.abc-enter {
  opacity: 0;
}

/* 進(jìn)入過程的狀態(tài) */
.abc-enter-active {
  opacity: 1;
  transition: opacity 2s ease;
}

/* 要離開的狀態(tài) */
.abc-exit {
  opacity: 1;
}

/* 離開過程的狀態(tài) */
.abc-exit-active {
  opacity: 0;
  transition: opacity 2s ease;
}

CSSTransition對(duì)應(yīng)的鉤子函數(shù):主要為了檢測(cè)動(dòng)畫的執(zhí)行過程，來完成一些JavaScript的操作

onEnter:在進(jìn)入動(dòng)畫之前被觸發(fā);

onEntering:在應(yīng)用進(jìn)入動(dòng)畫時(shí)被觸發(fā);

onEntered:在應(yīng)用進(jìn)入動(dòng)畫執(zhí)行結(jié)束后被觸發(fā);

onExit: 在離開動(dòng)畫之前觸發(fā);

onExiting: 在應(yīng)用離開動(dòng)畫時(shí)被觸發(fā)

onExited: 在應(yīng)用離開動(dòng)畫執(zhí)行結(jié)束后被觸發(fā)

<CSSTransition 
  timeout={2000} 
  unmountOnExit={true}
  in={isShow} 
  classNames="abc"
  onEnter={() => console.log("準(zhǔn)備開始執(zhí)行進(jìn)入動(dòng)畫")}
  onEntering={() => console.log("執(zhí)行進(jìn)入動(dòng)畫")}
  onEntered={() => console.log("進(jìn)入動(dòng)畫執(zhí)行結(jié)束")}
  onExit={() => console.log("準(zhǔn)備開始執(zhí)行離開動(dòng)畫")}
  onExiting={() => console.log("執(zhí)行離開動(dòng)畫")}
  onExited={() => console.log("離開動(dòng)畫執(zhí)行結(jié)束")}
>
  <h2>哈哈哈</h2>
</CSSTransition>

SwitchTransition(了解)

SwitchTransition可以完成兩個(gè)組件之間切換的炫酷動(dòng)畫:

比如我們有一個(gè)按鈕需要在on和off之間切換，我們希望看到on先從左側(cè)退出，off再?gòu)挠覀?cè)進(jìn)入;

這個(gè)動(dòng)畫在vue中被稱之為 vue transition modes;

react-transition-group中使用SwitchTransition來實(shí)現(xiàn)該動(dòng)畫;

SwitchTransition中主要有一個(gè)屬性:mode，有兩個(gè)值

in-out:表示新組件先進(jìn)入，舊組件再移除;

out-in:表示舊組件先移除，新組件再進(jìn)入;

如何使用SwitchTransition呢?

SwitchTransition組件里面要有CSSTransition或者Transition組件，不能直接包裹你想要切換的組件;

SwitchTransition里面的CSSTransition或Transition組件不再像以前那樣接受in屬性來判斷元素是何種狀態(tài)，取而代之的是 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(了解)

當(dāng)我們有一組動(dòng)畫時(shí)，需要將這些CSSTransition放入到一個(gè)TransitionGroup中來完成動(dòng)畫:

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>學(xué)生信息</h3>
        {/* component控制渲染成什么元素, 默認(rèn)為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()}>添加學(xué)生信息</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;
}