React-Transition-group之 React 动画组件（三）

组件安装------CSSTransition部分

项目目录下使用命令行

npm install [email protected] --save

安装组件。在需要使用动画的页面加入以下代码

import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./style.css";

App.js部分

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show:true,
      list: []
      
    };
    this.handleAddItem = this.handleAddItem.bind(this);
  }

  render() {
    return (
      <Fragment>
        <button onClick={this.handleAddItem}>Toggle</button>
        <TransitionGroup>
          {this.state.list.map((item, index) => {
            return (
              //将要显示动画的组件外面套上CSSTransition标签
              <CSSTransition
                in={this.state.show}//控制组件应用动画的属性值，通常将一个react的组件state赋值给它，
                		    //通过改变state，从而开启和关闭动画
                timeout={1000} //代表了整个的持续时间
                classNames="fade" //对应CSS里面的'fade-'前缀，可以换成别的，对应的CSS前缀也要换
                		  //classNames="fade"会被应用为fade-enter,fade-enter-active,fade-enter-done
                		  //,fade-exit,fade-exite-active,fade-exit-done, fade-appear以及
                		  //fade-appear-active.每一个独立的className都对应着单独的状态
                unmountOnExit //添加这个属性之后当组件消失时将移除组件的DOM
                onEntered={el => { //这个属性可以给动画播放完毕后的组件执行一次js函数
                  el.style.color = "blue";
                }}
                appear={true} //添加这个属性使组件第一次出现的时候（即页面刚加载时）也使用动画，
                              //对应css中的fade-appear和fade-appear-active样式
                key={index}
              >
                <div>{item}</div>
              </CSSTransition>
            );
          })}
        </TransitionGroup>
      </Fragment>
    );
  }
  handleAddItem() {
    this.setState(prevState => {
      return {
        list: [...prevState.list, "item"]
      };
    });
  }
}

export default App;

CSS部分

.fade-enter,
.fade-appear {
  opacity: 0;
}
.fade-enter-active,
.fade-apper-active {
  opacity: 1;
  transition: opacity 1s ease-in;
}
.fade-enter-done {
  opacity: 1;
  color: red;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.fade-exit-done {
  opacity: 0;
}

CSSTransition相关属性：

in
控制组件应用动画的属性值，通常将一个react的组件state赋值给它，通过改变state，从而开启和关闭动画

classNames|type:string

classNames[注意带s]属性用于当组件被应用动画时，不同的动画状态（enter,exits,done）将作为className属性的后缀来拼接为新的className，如： className="fade"会被应用为fade-enter,fade-enter-active,fade-enter-done,fade-exit,fade-exite-active,fade-exit-done, fade-appear以及fade-appear-active.每一个独立的className都对应着单独的状态，如：

classNames={{
   appear: 'my-appear',
   appearActive: 'my-active-appear',
   enter: 'my-enter',
   enterActive: 'my-active-enter',
   enterDone: 'my-done-enter,
   exit: 'my-exit',
   exitActive: 'my-active-exit',
   exitDone: 'my-done-exit,
}}

onEnter

<Transition>组件的回调函数，当组件enter或appear时会立即调用。

onEntering

 也是一个过渡组件的回调函数，当组件enter-active或appear-active时，立即调用此函数

onEntered

同样是回调函数，当组件的enter,appearclassName被移除时，意即调用此函数

onExit

 当组件应用exit类名时，调用此函数

onExiting

当组件应用exit-active类名时，调用此函数

onExited

当组件exit类名被移除，且添加了exit-done类名时，调用此函数

React-Transition-group之 React 动画组件（三）

猜你喜欢