面試官：在React中組件間過(guò)渡動(dòng)畫如何實(shí)現(xiàn)？
本文轉(zhuǎn)載自微信公眾號(hào)「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請(qǐng)聯(lián)系JS每日一題公眾號(hào)。
一、是什么
在日常開(kāi)發(fā)中，頁(yè)面切換時(shí)的轉(zhuǎn)場(chǎng)動(dòng)畫是比較基礎(chǔ)的一個(gè)場(chǎng)景
當(dāng)一個(gè)組件在顯示與消失過(guò)程中存在過(guò)渡動(dòng)畫，可以很好的增加用戶的體驗(yàn)
在react中實(shí)現(xiàn)過(guò)渡動(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)組件的入場(chǎng)和離場(chǎng)動(dòng)畫
其主要提供了三個(gè)主要的組件：
- CSSTransition：在前端開(kāi)發(fā)中，結(jié)合 CSS 來(lái)完成過(guò)渡動(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)，通過(guò)css的transition屬性，讓元素在兩個(gè)狀態(tài)之間平滑過(guò)渡，從而得到相應(yīng)的動(dòng)畫效果
當(dāng)in屬性置為false時(shí)，CSSTransition會(huì)給子組件加上xxx-exit和xxx-exit-active的class，然后開(kāi)始執(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再?gòu)挠覀?cè)進(jìn)入
SwitchTransition中主要有一個(gè)屬性mode，對(duì)應(yīng)兩個(gè)值：
- in-out：表示新組件先進(jìn)入，舊組件再移除;
- out-in：表示就組件先移除，新組建再進(jìn)入
SwitchTransition組件里面要有CSSTransition，不能直接包裹你想要切換的組件
里面的CSSTransition組件不再像以前那樣接受in屬性來(lái)判斷元素是何種狀態(tài)，取而代之的是key屬性
下面給出一個(gè)按鈕入場(chǎng)和出場(chǎng)的示例，如下：
- 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中來(lái)完成動(dòng)畫
同樣CSSTransition里面沒(méi)有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;
- }
參考文獻(xiàn)
- https://segmentfault.com/a/1190000018861018
- https://mp.weixin.qq.com/s/14HneI7SpfrRHKtqgosIiA
