React也动画提供了一个附加组件ReactTransitionGroup,这个附加组件是动画的底部API,并且还提供了一个附件组件ReactCSSTransitionGroup,ReactCSSTransitionGroup能够简单的贯彻基于css的卡通片与转移

高级API ReactCSSTransitionGroup

ReactCSSTransitionGroup是一个因ReactTransitionGroup的API,当一个React组件插入或者移除DOM时,它是平等种植简易的失去实施css转换和动画的办法

以一个demo举例

ReactCSSTransitionGroup是ReactTransitions的接口,可以管其当做一个简易的素,它包裹在所有想补充加动画作用的React组件。下面来一个例证:

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
    var React = require('react');
    var ReactDOM = require('react-dom');
    var data = ['one','two','three'];
    var Control = React.createClass({
        getInitialState:function(){
            return {
                'items':this.props.data
            }
        },
        addItem:function(){
            var newItems = this.state.items.concat('four');
            this.setState({
                'items':newItems
            });
        },
        removeItem:function(i){
            var newItems = this.state.items;
            newItems.splice(i,1);
            this.setState({
                'items':newItems
            });
        },
        render:function(){
            var $this = this;
            var List = this.state.items.map(function(value,index){
                return <div key={value} onClick = {$this.removeItem.bind($this,index)}> { value}</div>
            });
            return (
                <div>
                    <button onClick={this.addItem}>add Item</button>
                    <ReactCSSTransitionGroup
                        transitionName='example'
                        transitionEnterTimeout={500}
                        transitionLeaveTimeout={300}>
                        {List}
                    </ReactCSSTransitionGroup>
                </div>
            )
        }
    });
    ReactDOM.render(<Control data={data}/> ,document.getElementById('content'));

 

本着例子的诠释:

(1)你待为此npm安装react-addons-css-transition-group,然后通过require在文书中引入,然后与给一个变量,在此间将是变量命名为ReactCSSTransitionGroup,也可免获取别的名字
(2)为各国一个ReactCSSTransitionGroup组件的子元素设置一个key属性,就到底其就生一个子元素。key值必须是唯一的。设置一个key属性是为着让react确定好子元素插入了,移除了,或者保持。

(3)在是demo中,当一个新的子元素被补加至ReactCSSTransitionGroup中,它就会见沾一个example-enter
CSS类名,随后其以见面取得一个example-enter-active
CSS类名。这些类名基于transitionName属性值。你能利用此类名去落实css动画。添加如下的css样式:

.example-enter {
      opacity: 0.01;
    }

    .example-enter.example-enter-active {
      opacity: 1;
      transition: opacity 500ms ease-in;
    }

    .example-leave {
      opacity: 1;
    }

    .example-leave.example-leave-active {
      opacity: 0.01;
      transition: opacity 300ms ease-in;
    }

 

这些体中transition-duration值必须同ReactCSSTransitionGroup组件的transitionEnterTimeout和transitionLeaveTimeout属性值一一对应

(4)这个时你点击’add
Item’按钮将会盖平等栽淡入的法门丰富一个新的子元素,点击一个既在的子元素,这个让点击的子元素将会晤以同等种退出的计于移除。

Animate Initial Mounting

ReactCSSTransitionGroup提供了一个可选的特性transitionAppear,如果用是特性设置为true,在组件的初始化装置就会补加一个附加的换等。默认情况下transitionAppear为false,如下:

 

render: function() {
        return (
          <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
            {list}
          </ReactCSSTransitionGroup>
        );
      }

这般于初始化装载ReactCSSTransitionGroup时,它的每个子元素都见面生出一个example-appear
CSS类接着会生一个example-appear-active
CSS类,如果上加如下的样式:

    .example-appear {
        opacity: 0.01;
      }

      .example-appear.example-appear-active {
        opacity: 1;
        transition: opacity .5s ease-in;
      }

在ReactCSSTransitionGroup的装载等即会见时有发生一个淡入的动画。在初始化装载等,每一个ReactCSSTransitionGroup子元素还是appear而休是enter,然而,子元素进入一个早就有的ReactCSSTransitionGroup,这个子元素是enter而未是appear

自从定义类名

当上面的demo中,我们叫transitionName属性设置了一个字符串example,所以,每一个号涉及的CSS类名都是以example开头的。我们啊可吃transitionName设置一个字符串,这样好为各级一个阶段于定义类名,如下有星星点点种植设置法:

<ReactCSSTransitionGroup
    transitionName={ {
      enter: 'enter',
      enterActive: 'enterActive',
      leave: 'leave',
      leaveActive: 'leaveActive',
      appear: 'appear',
      appearActive: 'appearActive'
    } }>
    {item}
  </ReactCSSTransitionGroup>

  <ReactCSSTransitionGroup
    transitionName={ {
      enter: 'enter',
      leave: 'leave',
      appear: 'appear'
    } }>
    {item2}
  </ReactCSSTransitionGroup>

Animation Group Must Be Mounted To Work

以吃各一个子元素都来一个淡入和离的功能,子元素必须进入或去一个已深受装载的ReactCSSTransitionGroup组件中,或者ReactCSSTransitionGroup的transitionAppear属性为true,下面是事例就是非会见发淡入和离的力量,因为,ReactCSSTransitionGroup和一个初的子元素被单独装载,而无是子元素载入一个早已有的ReactCSSTransitionGroup中。

render: function() {
        var items = this.state.items.map(function(item, i) {
          return (
            <div key={item} onClick={this.handleRemove.bind(this, i)}>
              <ReactCSSTransitionGroup transitionName="example">
                {item}
              </ReactCSSTransitionGroup>
            </div>
          );
        }, this);
        return (
          <div>
            <button onClick={this.handleAdd}>Add Item</button>
            {items}
          </div>
        );
      }

 

一个或者0单子元素

当上面的事例中ReactCSSTransitionGroup有差不多个子元素,实际上,ReactCSSTransitionGroup可以单独发生一个或者没有子元素,如下所示:

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

    var ImageCarousel = React.createClass({
      propTypes: {
        imageSrc: React.PropTypes.string.isRequired
      },
      render: function() {
        return (
          <div>
            <ReactCSSTransitionGroup transitionName="carousel" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
              <img src={this.props.imageSrc} key={this.props.imageSrc} />
            </ReactCSSTransitionGroup>
          </div>
        );
      }
    });

 

剥夺动画

如果你愿意,你可知禁用leave或者enter动画。例如,你想给子元素有一个enter动画而尚未一个leave动画,但是以默认情况下,在公移除DOM节点前,ReactCSSTransitionGroup会等待一个动画片去得。你会让ReactCSSTransitionGroup设置transitionEnter={false}
或者 transitionLeave={false}去受用这些动画片

 

 

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图