React 附件动画API ReactCSSTransitionGroup

作者: 立即进入  发布:2019-10-11

自定义类名

在上头的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

React 附件动画API ReactCSSTransitionGroup。为了让每一个子元素皆有二个淡入和退出的效果与利益,子成分必得步向或离开叁个曾经棉被服装载的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>
        );
      }

 

React 附件动画API ReactCSSTransitionGroup。React为动画提供了三个增大组件ReactTransitionGroup,那几个附加组件是动画片的尾部API,何况还提供了一个附属类小部件组件ReactCSSTransitionGroup,ReactCSSTransitionGroup能够简单的贯彻基于css的卡通片和改变

React 附件动画API ReactCSSTransitionGroup。React 附件动画API ReactCSSTransitionGroup。剥夺动画

假诺你愿意,你能够禁止使用leave可能enter动画。举个例子,你想让子成分有二个enter动画而未有三个leave动画,可是在暗中同意情形下,在您移除DOM节点在此以前,ReactCSSTransitionGroup会等待一个动画去完结。你能给ReactCSSTransitionGroup设置transitionEnter={false} 可能 transitionLeave={false}去禁止使用那些动画片

React 附件动画API ReactCSSTransitionGroup。 

 

 

 

 

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

贰个照旧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>
        );
      }
    });

 

高级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'按键将会以一种淡入的点子丰富三个新的子成分,点击三个早已存在的子成分,这些被点击的子成分将会以一种退出的章程被移除。

本文由6165金沙总站发布于立即进入,转载请注明出处:React 附件动画API ReactCSSTransitionGroup

关键词:

上一篇:没有了
下一篇:没有了