2

I've been searching for a solution to use ReactJS animations in a RoR app using Coffeescript.

I've tried this (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>`

In Chrome's developer tools (React tab), I see the following: Chrome dev tools screenshot

Here is my SASS code (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

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 !

(The TeamForm is rendered after clicking on a link that creates the element and adds it to a given div by ID)

If someone could help me out, that would be great !!

Many thanks.

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.

nicolasthy
  • 31
  • 3
  • 1
    I believe you're shooting yourself in a foot by trying to use both jsx and coffee script at the same time. Rails likes plain ol' javascript just as much as coffee! – Mike Szyndel Jan 13 '16 at 20:26
  • @MichalSzyndel This is how it was done in one of the best articles that I've found about React-rails when I started. Never encountered any issues this far except for animations. – nicolasthy Jan 14 '16 at 09:02
  • You're free to do whatever you want. I just pointed to an obvious fact that you're using two markup languages on top each other. This is a bad practice from my experience. – Mike Szyndel Jan 14 '16 at 10:30
  • @MichalSzyndel Regarding your comments, I'm starting to convert my current code to JSX/ES6. It should be a better option for me to be able to port my code to React Native / Electron easily. Thanks for the advice. – nicolasthy Jan 14 '16 at 13:01

0 Answers0