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>
    );
  }
}

對應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可以完成兩個組件之間切換的炫酷動畫

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

SwitchTransition中主要有一個屬性mode，對應兩個值：

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

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

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

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

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文件對應如下：

.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

當有一組動畫的時候，就可將這些CSSTransition放入到一個TransitionGroup中來完成動畫

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

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

其處理方式如下：

插入的節(jié)點，先渲染dom，然后再做動畫
刪除的節(jié)點，先做動畫，然后再刪除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"]
    })
  }
}

對應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組件中過渡動畫的問題解決的詳細內容，更多關于react組件過渡動畫的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: