2

我一直在寻找在使用 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 开发工具截图

这是我的 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 来解决这个问题。但是，这似乎不是正确的解决方案。不过，我仍然很想知道这些动画是如何工作的。

4

0 回答 0