快捷導(dǎo)航

react組件中過渡動(dòng)畫的問題解決

更新時(shí)間：2022年09月08日 08:30:31 作者：別救了這猴子廢了

這篇文章主要為大家介紹了react組件中過渡動(dòng)畫的問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、是什么

在日常開發(fā)中，頁面切換時(shí)的轉(zhuǎn)場動(dòng)畫是比較基礎(chǔ)的一個(gè)場景

當(dāng)一個(gè)組件在顯示與消失過程中存在過渡動(dòng)畫，可以很好的增加用戶的體驗(yàn)

在react中實(shí)現(xiàn)過渡動(dòng)畫效果會(huì)有很多種選擇，如react-transition-group，react-motion，Animated，以及原生的CSS都能完成切換動(dòng)畫

二、如何實(shí)現(xiàn)

在react中，react-transition-group是一種很好的解決方案，其為元素添加enter，enter-active，exit，exit-active這一系列勾子

可以幫助我們方便的實(shí)現(xiàn)組件的入場和離場動(dòng)畫

其主要提供了三個(gè)主要的組件：

CSSTransition：在前端開發(fā)中，結(jié)合 CSS 來完成過渡動(dòng)畫效果
SwitchTransition：兩個(gè)組件顯示和隱藏切換時(shí)，使用該組件
TransitionGroup：將多個(gè)動(dòng)畫組件包裹在其中，一般用于列表中元素的動(dòng)畫

CSSTransition

其實(shí)現(xiàn)動(dòng)畫的原理在于，當(dāng)CSSTransition的in屬性置為true時(shí)，CSSTransition首先會(huì)給其子組件加上xxx-enter、xxx-enter-active的class執(zhí)行動(dòng)畫

當(dāng)動(dòng)畫執(zhí)行結(jié)束后，會(huì)移除兩個(gè)class，并且添加-enter-done的class

所以可以利用這一點(diǎn)，通過css的transition屬性，讓元素在兩個(gè)狀態(tài)之間平滑過渡，從而得到相應(yīng)的動(dòng)畫效果

當(dāng)in屬性置為false時(shí)，CSSTransition會(huì)給子組件加上xxx-exit和xxx-exit-active的class，然后開始執(zhí)行動(dòng)畫，當(dāng)動(dòng)畫結(jié)束后，移除兩個(gè)class，然后添加-enter-done的class

如下例子：

export default class App2 extends React.PureComponent {
  state = {show: true};
  onToggle = () => this.setState({show: !this.state.show});
  render() {
    const {show} = this.state;
    return (
      <div className={'container'}>
        <div className={'square-wrapper'}>
          <CSSTransition
            in={show}
            timeout={500}
            classNames={'fade'}
            unmountOnExit={true}
          >
            <div className={'square'} />
          </CSSTransition>
        </div>
        <Button onClick={this.onToggle}>toggle</Button>
      </div>
    );
  }
}

對(duì)應(yīng)css樣式如下：

.fade-enter {
  opacity: 0;
  transform: translateX(100%);
}
.fade-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 500ms;
}
.fade-exit {
  opacity: 1;
  transform: translateX(0);
}
.fade-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 500ms;
}

SwitchTransition

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

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

SwitchTransition中主要有一個(gè)屬性mode，對(duì)應(yīng)兩個(gè)值：

in-out：表示新組件先進(jìn)入，舊組件再移除；
out-in：表示就組件先移除，新組建再進(jìn)入

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

里面的CSSTransition組件不再像以前那樣接受in屬性來判斷元素是何種狀態(tài)，取而代之的是key屬性

下面給出一個(gè)按鈕入場和出場的示例，如下：

import { SwitchTransition, CSSTransition } from "react-transition-group";
export default class SwitchAnimation extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isOn: true
    }
  }
  render() {
    const {isOn} = this.state;
    return (
      <SwitchTransition mode="out-in">
        <CSSTransition classNames="btn"
                       timeout={500}
                       key={isOn ? "on" : "off"}>
          {
          <button onClick={this.btnClick.bind(this)}>
            {isOn ? "on": "off"}
          </button>
        }
        </CSSTransition>
      </SwitchTransition>
    )
  }
  btnClick() {
    this.setState({isOn: !this.state.isOn})
  }
}

css文件對(duì)應(yīng)如下：

.btn-enter {
  transform: translate(100%, 0);
  opacity: 0;
}
.btn-enter-active {
  transform: translate(0, 0);
  opacity: 1;
  transition: all 500ms;
}
.btn-exit {
  transform: translate(0, 0);
  opacity: 1;
}
.btn-exit-active {
  transform: translate(-100%, 0);
  opacity: 0;
  transition: all 500ms;
}

TransitionGroup

當(dāng)有一組動(dòng)畫的時(shí)候，就可將這些CSSTransition放入到一個(gè)TransitionGroup中來完成動(dòng)畫

同樣CSSTransition里面沒有in屬性，用到了key屬性

TransitionGroup在感知children發(fā)生變化的時(shí)候，先保存移除的節(jié)點(diǎn)，當(dāng)動(dòng)畫結(jié)束后才真正移除

其處理方式如下：

插入的節(jié)點(diǎn)，先渲染dom，然后再做動(dòng)畫
刪除的節(jié)點(diǎn)，先做動(dòng)畫，然后再刪除dom

如下：

import React, { PureComponent } from 'react'
import { CSSTransition, TransitionGroup } from 'react-transition-group';
export default class GroupAnimation extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      friends: []
    }
  }
  render() {
    return (
      <div>
        <TransitionGroup>
          {
            this.state.friends.map((item, index) => {
              return (
                <CSSTransition classNames="friend" timeout={300} key={index}>
                  <div>{item}</div>
                </CSSTransition>
              )
            })
          }
        </TransitionGroup>
        <button onClick={e => this.addFriend()}>+friend</button>
      </div>
    )
  }
  addFriend() {
    this.setState({
      friends: [...this.state.friends, "coderwhy"]
    })
  }
}

對(duì)應(yīng)css如下：

.friend-enter {
    transform: translate(100%, 0);
    opacity: 0;
}
.friend-enter-active {
    transform: translate(0, 0);
    opacity: 1;
    transition: all 500ms;
}
.friend-exit {
    transform: translate(0, 0);
    opacity: 1;
}
.friend-exit-active {
    transform: translate(-100%, 0);
    opacity: 0;
    transition: all 500ms;
}

以上就是react組件中過渡動(dòng)畫的問題解決的詳細(xì)內(nèi)容，更多關(guān)于react組件過渡動(dòng)畫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: