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;
}

请注意，我在react生成的类中使用了animate.css的动画。 ReactCSSTransitionGroup如下所示。

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

Answer 2

塞巴斯蒂安，你当时正走在正确的轨道上，但我认为你误解了输入vs enterActive：

工作小提琴：

http://jsfiddle.net/mjv2y58o/

<ReactCSSTransitionGroup transitionName={{enter: "animated", enterActive: "bounce", leave: "animated",leaveActive: "tada"}}>

您允许多个类名的提议仍然有效，因为它对infinite等实用程序类很有用，但是不需要让Animate.css使用react 0.14。

然而，许多Animate.css的入门动画并不适合React，特别是在Safari中。将组件添加到dom之后和动画开始之前有一个短暂的延迟，因此在进入时，您将获得组件的闪光，然后隐藏它并将其设置为视图。

Answer 3

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

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

请注意，您不能直接使用ReactCSSTransitionGroup，因为它具有类名约定：您必须控制动画类名称才能遵循React约定。我的意思是.transitionName-enter-active是ReactCSSTransitionGroup在节点上放置动画的内容，而您需要.animate zoomIn之类的内容。

修改

根据this commit / issue，我发现您现在可以自定义所有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并自己解决bug：）

Answer 4

找到解决方案。

它没有100％顺利地工作，但它在某些组件中看起来非常好：

/SET

将动画类放在子元素上。

将transitionEnterTimout保持在1000也很重要。这是animate.css动画运行所需的时间。 React需要知道这一点。我已将transitionLeaveTimeout设置为1，因为我并不关心leaveAnimation。您可能需要根据自己的需要进行调整。

Answer 5

为了使它能够与react-transition-group（v4.x.x）的较新版本一起工作，我付出了一些努力，最后这是代码：

注意：我使用的是animate.css v4，而类名与v3略有不同

import { CSSTransition } from 'react-transition-group'

const [ showControls, setShowControls ] = useState(false)

<CSSTransition
  in={showControls}
  timeout={400}
  unmountOnExit
  classNames={{
    enter: 'animate__animated',
    enterActive: 'animate__fadeInUp',
    exit: 'animate__animated',
    exitActive: 'animate__fadeOutDown'
  }}
>
  <div />
</CSSTransition>

我正在使用上面的代码显示鼠标移动时的控制按钮，并在超时后隐藏它们，而unmountOnExit道具对于退出过渡后隐藏组件非常重要

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

5 个答案:

将动画类放在子元素上。