使用react-transition-group 实现动画

使用CSS3 提供的transition 与 animation 可以实现动画效果，但是在一些复杂效果时，还是需要借助js的，这儿介绍一下react 的动画框架，更方便的写一些动画。

react-transition-group 是react 的一个第三方模块。借助这个模块，可以实现更加复杂的动画效果。

可以在GitHub 上找到这个项目。https://github.com/reactjs/react-transition-group

然后上面的文档里，说明了如何使用 (https://reactcommunity.org/react-transition-group/)

然后呢，我们主要是看 CSSTransition 的部分。

使用react-transition-group 实现动画

首先我们将第十一行代码复制下来。放到js 文件里。如下 App.js 中。

import React, { Component, Fragment } from 'react'
import { CSSTransition } from 'react-transition-group';
import './style.css'

然后继续修改App.js 如下。

import React, { Component, Fragment } from 'react'
import { CSSTransition } from 'react-transition-group';
import './style.css'

class App2 extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show: true
    }
    this.handleToggle = this.handleToggle.bind(this)
  }

  render() {
    return (
      <Fragment>
        <CSSTransition
          in={this.state.show}
          timeout={500}
          classNames='fade'
        >
          <div>hello</div>
        </CSSTransition>
        <button onClick={this.handleToggle}>toggle</button>
      </Fragment>
    )
  }

  handleToggle() {
    this.setState({
      show: this.state.show ? false : true
    })
  }
}

export default App2;

更改style.css 如下。

.fade-enter {
/*入场*/
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 1s ease-in;
}
.fade-enter-done {
  opacity: 1;
}
.fade-exit {
/*出场*/
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.fade-exit-done {
  opacity: 0;
}

这个工具还有很多很好的功能比如说钩子函数，再去探索吧。

还有一项，当我们要做多个元素（li）的动画效果的时候，需要借助 TransitionGroup 配合 CSSTransition 一起使用。

import React, { Component, Fragment } from 'react'
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './style.css'

class App3 extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
    this.handleAddItem = this.handleAddItem.bind(this)
  }

  render() {
    return (
      <Fragment>
        <TransitionGroup>
        {
          this.state.list.map( (item, index) => {
            return (
              <CSSTransition
                timeout={500}
                classNames='fade'
                key={index}
              >
                <div>{item}</div>
              </CSSTransition>
            )
          })
        }
        </TransitionGroup>
        <button onClick={this.handleAddItem}>toggle</button>
      </Fragment>
    )
  }

  handleAddItem() {
    this.setState( (prevState) => {
      return {
        list: [...prevState.list, 'item']
      }
    })
  }
}

export default App3;

使用react-transition-group 实现动画

相关推荐