React Transition Group 中文文档（CSSTransition部分）

CSSTransition

此Transition组件用于CSS动画过渡，灵感来源于ng-animate库。

CSSTransition：在组件淡入appear，进场enter,出场exit时，CSSTransition组件应用了一系列className名来对这些动作进行描述。首先appear被应用到组件className上，接着添加“active”类名来激活CSS动画。在动画完成后，原class改变为done表明组件动画已经应用完成并加载完成。

当组件的in属性变为true时，组件的className将被赋值为example-enter，并在下一刻添加example-enter-active的CSS class名。这些都是基于className属性的约定。即：原组件带有className="animate-rotate"，则enter状态时，变为"animate-rotate-enter"

属性

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类名时，调用此函数

示例

此示例为自定的示例，通过点击button来切换state改变引起CSSTransition改变，并结合预先设定的CSS效果来实现进场，出场动画。

• 组件 Testimport React from ‘react’;

import {CSSTransition} from 'react-transition-group';
import ReactDOM from 'react-dom';
import './test.scss';

class Test extends React.Component {
constructor(){
    super()
    this.state={
        showBox:false
    }
}
componentDidMount(){
    this.boxDOM = ReactDOM.findDOMNode(this.refs.box);
    console.log(this.boxDOM)

}
toggleBox=()=>{
    this.setState({
        showBox:!this.state.showBox
    })
};
render() {
    return (
        <div>
            <button onClick={this.toggleBox}>切换</button>
            <CSSTransition in={this.state.showBox} classNames="test" timeout={300}
                onEnter={()=>{
                    this.boxDOM.style.display = "block";
                }}
               onExited={()=>{
                   this.boxDOM.style.display = "none";
               }}
            >
                <div className="box" ref="box">
                    <h1>测试动画效果滴。</h1>
                    <div className="color-box">哈哈哈</div>
                </div>
            </CSSTransition>
        </div>)
}
}
export default Test;

• test.scss

.box{
  display: none;
  transform-origin:0 bottom;
  &.test-enter{
    transform:rotateZ(90deg);
    &.test-enter-active{
      transition:transform .3s;
      transform: rotateZ(0deg);
    }
  }
  &.test-exit{
    transform:rotateZ(0deg);

    &.test-exit-active{
      transition:transform .3s;
      transform: rotateZ(90deg);
    }
  }
  .color-box{
    width:200px;
    height:200px;
    background: #ff0;
    color: #000;
    line-height: 200px;
    text-align: center;
  }
}