Animation 如何添加reactjs动画库和Animate.css来制作动画

我有一个简单的待办事项清单

添加和删除时，我需要添加animate.css库动画。我真的是个新手。我读过文档，但很难理解

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

/**@jsx React.DOM*/
var TodoList=React.createClass({
propTypes:{items:React.propTypes.array}，
render:function（）{
var createItem=函数（itemText）{
返回
{itemText}
；
};
返回
{this.props.items.map（createItem）}
；
}
});
var TodoApp=React.createClass({
getInitialState:函数（）{
返回{items:[]，文本：'}；
},
onChange：函数（e）{
this.setState（{text:e.target.value}）；
},
handleSubmit:函数（e）{
e、 预防默认值（）；
var nextItems=this.state.items.concat（[this.state.text]）；
var nextText=''；
this.setState（{items:nextItems，text:nextText}）；
},
render:function（）{
返回(
待办事项
{'Add#'+（this.state.items.length+1）}
);
}
});
React.renderComponent（，document.body）；

请参见

您可以使用

ReactTransitionGroup

并使用回调在子节点上设置animate.css类

请注意，您不能直接使用

reactcstransitiongroup

，因为它具有类名约定：为了遵循React约定，您必须控制动画类名。我的意思是

.transitionName enter active

是

reactcstransitiongroup

在节点上设置动画的内容，而您需要类似

.animate zoomIn

的内容

编辑

根据/我看到，您现在可以自定义所有

reactcstranitiongroup

类名

看看这些道具类型：

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

var TodoList=React.createClass({
getInitialState:函数（）{
var todos=[{text:“Init Todo1”}，{text:“Init Todo2”}]；
返回{todos:todos}；
},
添加：函数（）{
var todos=this.state.todos；
push（{text:“New！”}）；
this.setState（{todos:todos}）；
},
删除：函数（）{
var todos=this.state.todos；
todos.pop（）；
this.setState（{todos:todos}）；
},
render:function（）{
var todos=this.state.todos.map（函数（todo，索引）{
返回
});
返回(
添加
去除


{todos}
);
}
});
var Todo=React.createClass({
render:function（）{
返回{this.props.todo.text}；
}
});

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

---

同时，您可以简单地复制ReactCSTransanitionGroup并自己解决该错误：）

Sebastien，您的做法是正确的，但我认为您误解了enter vs enterActive：

工作小提琴：

您关于允许多个类名的建议仍然有效，因为它对于诸如

infinite

之类的实用程序类很有用，但不需要使用react 0.14获得Animate.css

---

然而，许多Animate.css的入门动画并不能很好地使用React，特别是在Safari中。组件添加到dom之后和动画开始之前会有一个短暂的延迟，所以在进入条目之前，您会看到组件的一个闪光，在它被隐藏和动画化到视图中之前。

只需找到解决方案

它的工作不是100%顺利，但在某些组件中看起来确实不错：

events = this.props.schedule.map(function(event) {
    return (
        <li className="animated" key={event.time}>
           <ScheduleEventItem event={event} />
        </li>
    );
});


return (
                <React.addons.CSSTransitionGroup className="animated" 
                    transitionName={{enter: "flipInX", leave: "flipOutX"}}
                    transitionEnterTimeout={1000} transitionLeaveTimeout={1}
                    >
                        {events}
                </React.addons.CSSTransitionGroup>
);

events=this.props.schedule.map（函数（事件）{
返回(


);
});
返回(
{events}
);

将动画类放在子元素上。

---

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

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

我就是这样做的，我从提供者那里下载了

animate.css

，并编写了

style.css

导入

animate.css

，如下所示

@import "lib/animate.css";

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

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

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

注意，我在react生成的类中使用了

animate.css

的动画。

reactcstransitiongroup

如下所示

@import "lib/animate.css";

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

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

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

{content}

我费了一点劲才使它能够与较新版本的

react transition group

（v4.x.x）一起工作，最后是代码：

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

从'react transition group'导入{cstranslation}
常量[showControls，setShowControls]=useState（false）

---

我正在使用上面的代码显示鼠标移动时的控制按钮，并在超时后隐藏它们，

unmountonnexit

prop对于在退出转换后隐藏组件非常重要

您可以提供一些详细信息如何做到这一点吗？@Panczo基本上的想法是复制reactcstransitinggroup并进行修改我的问题与这个问题有关，也许你对它了解得更多一些？

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>