如何将reactjs动画库和Animate .css添加到动画中

Question

我有这个简单的Todo List,

我需要在添加和删除时添加animate.css库动画.我真的很新.我已阅读文档,但很难理解,

这是一个需要编码帮助的问题.

http://jsfiddle.net/johnthethird/NXCyC/7/

/** @jsx React.DOM */
var TodoList = React.createClass({
  propTypes: {items: React.PropTypes.array},
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});
var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});
React.renderComponent(<TodoApp />, document.body);

Answer 1

一个旧线程,但我认为我有一个简单,直接的解决方案.

我是这样做的,我animate.css从提供商处下载并编写了我的styles.css导入animate.css,如下所示.

@import "lib/animate.css";

.headerForm-enter {
    animation: 0.8s flipInX ease;
}

.headerForm-leave {
    animation: 0.5s flipOutX ease;
}

请注意,我正在使用animate.cssreact生成的类中的动画.该ReactCSSTransitionGroup如下所示.

<ReactCSSTransitionGroup
    transitionName='headerForm'
    transitionEnterTimeout={800}
    transitionLeaveTimeout={500}>
    {content}
</ReactCSSTransitionGroup>

Answer 2

请参阅https://facebook.github.io/react/docs/animation.html

您可以使用ReactTransitionGroup回调在子节点上设置 animate.css 类。

请注意，您不能直接使用，ReactCSSTransitionGroup因为它具有类名称约定：您必须控制动画类名称才能遵循 React 约定。我的意思.transitionName-enter-active是是什么ReactCSSTransitionGroup让节点动画化，而你需要类似.animate zoomIn.

编辑

根据此提交/问题，我看到您现在可以自定义所有ReactCSSTransitionGroup类名。

查看属性类型：

  propTypes: {
    transitionName: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.shape({
        enter: React.PropTypes.string,
        leave: React.PropTypes.string
      }),
      React.PropTypes.shape({
        enter: React.PropTypes.string,
        enterActive: React.PropTypes.string,
        leave: React.PropTypes.string,
        leaveActive: React.PropTypes.string
      })
    ]).isRequired,
    transitionAppear: React.PropTypes.bool,
    transitionEnter: React.PropTypes.bool,
    transitionLeave: React.PropTypes.bool
  },

我认为它仅适用于 React 0.14.0（仍处于测试阶段）

不幸的是，根据我的测试，这不足以轻松支持开箱即用的 Animate.CSS。

使用新版本，人们应该能够编写：

var TodoList = React.createClass({
  getInitialState: function() {
      var todos = [  {text: "Init Todo1"}  ,  {text: "Init Todo2"}   ];
      return {todos: todos}; 
  },

  add: function() {
      var todos = this.state.todos;
      todos.push({text: "New!"});
      this.setState({todos: todos});
  },
  remove: function() {
      var todos = this.state.todos;
      todos.pop();
      this.setState({todos: todos});
  },

  render: function() {
    var todos = this.state.todos.map(function(todo, index) {
      return <Todo key={index} todo={todo}/>
    });
    return (
        <div>
            <div onClick={this.add}>Add</div>
            <div onClick={this.remove}>Remove</div>
            <br/>
            <div>
                <ReactCSSTransitionGroup transitionName={{enter: "animated bounce", enterActive: "animated bounce", leave: "animated tada",leaveActive: "animated tada"}}>
                    {todos}
                </ReactCSSTransitionGroup>
            </div>
        </div>
    );
  }
});

var Todo = React.createClass({
  render: function() {
    return <div>{this.props.todo.text}</div>;
  }
});

http://jsfiddle.net/ghmpo42k/6/

不幸的是，由于未处理的情况不允许同时设置多个类，因此这还不起作用。会在 React 问题上提及这一点，以便将来得到支持。

在中间，你可以简单地复制 ReactCSSTransitionGroup 并自己解决错误:)