title: React-rails Animations with Coffeescript
body: <p>I've been searching for a solution to use ReactJS animations in a RoR app using Coffeescript.</p>
  
  <p>I've tried this (<em>assets/javascript/components/sidebar/teams_form.js.jsx.coffee</em>):</p>
  
  <pre><code>ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
  
  @TeamForm = React.createClass
    render: -&gt;
      `&lt;ReactCSSTransitionGroup transitionName="example" transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}&gt;
          &lt;div key="1"&gt;Coucou&lt;/div&gt;
      &lt;/ReactCSSTransitionGroup&gt;`
  </code></pre>
  
  <p>In Chrome's developer tools (React tab), I see the following:
  <a href="http://i.stack.imgur.com/LszsU.png" rel="nofollow">Chrome dev tools screenshot</a></p>
  
  <p>Here is my SASS code (<em>assets/stylesheets/partials/_sidebar.sass</em>):</p>
  
  <pre><code>.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
  </code></pre>
  
  <p>The resulting code does not animate anything. It does a simple render with no background color. I've been looking for a solution for ages !</p>
  
  <p>(The TeamForm is rendered after clicking on a link that creates the element and adds it to a given div by ID)</p>
  
  <p>If someone could help me out, that would be great !!</p>
  
  <p>Many thanks.</p>
  
  <p>EDIT: I managed to get around the problem by simply adding / removing classes onClick with jQuery. However it doesn't seem to be the right solution. I'm still curious to learn how these animations work though.</p>