使用Coffeescript进行React-rails动画

Question

我一直在寻找使用Coffeescript在RoR应用中使用ReactJS动画的解决方案。

我已尝试过此操作（ assets / javascript / components / sidebar / teams_form.js.jsx.coffee ）：

ReactCSSTransitionGroup = React.addons.CSSTransitionGroup

@TeamForm = React.createClass
  render: ->
    `<ReactCSSTransitionGroup transitionName="example" transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
        <div key="1">Coucou</div>
    </ReactCSSTransitionGroup>`

在Chrome的开发者工具（React标签）中，我看到以下内容： Chrome dev tools screenshot

这是我的SASS代码（ assets / stylesheets / partials / _sidebar.sass ）：

.example-enter
  background: yellow
  transition: background 1s ease-in

.example-enter.example-enter-active
  background: white

.example-leave
  opacity: 1
  transition: opacity .5s ease-in

.example-leave.example-leave-active
  opacity: 0.01

生成的代码不会为任何内容制作动画。它做一个没有背景颜色的简单渲染。我一直在寻找解决方案！

（TeamForm在点击创建元素的链接后呈现，并按ID添加到给定的div）

如果有人可以帮助我，那就太棒了!!

非常感谢。

编辑：我设法通过简单地使用jQuery添加/删除类onClick来解决问题。然而，它似乎并不是正确的解决方案。我仍然很想知道这些动画是如何运作的。