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

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

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

React的過渡動畫

過渡動畫庫的介紹

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

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

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

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

# npm

npm install react-transition-group --save

# yarn

yarn add react-transition-group

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

react-transition-group主要包含四個組件:

Transition(了解)

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

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

CSSTransition

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

SwitchTransition

兩個組件顯示和隱藏切換時，使用該組件

TransitionGroup

將多個動畫組件包裹在其中，一般用于列表中元素的動畫;

CSSTransition(掌握)

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

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

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

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

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

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

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

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

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

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

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

classNames:動畫class的名稱

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

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

timeout:

過渡動畫的時間, 最好和css中的時間保持一致

appea:

是否在初次進(jìn)入添加動畫(需要和in同時為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對應(yīng)的鉤子函數(shù):主要為了檢測動畫的執(zhí)行過程，來完成一些JavaScript的操作

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

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

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

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

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

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

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

SwitchTransition(了解)

SwitchTransition可以完成兩個組件之間切換的炫酷動畫:

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

這個動畫在vue中被稱之為 vue transition modes;

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

SwitchTransition中主要有一個屬性:mode，有兩個值

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)我們有一組動畫時，需要將這些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>學(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;
}