Transitions

[ChrisCinelli]

Provide a mechanism to do smooth animated transitions to a different route.
Consider also the same route with different parameters. Ex: /user/123 to/user/124.
Ideally it can work with ReactCSSTransitionGroup

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/29560423-transitions?utm_campaign=plugin&utm_content=tracker%2F18115217&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F18115217&utm_medium=issues&utm_source=github).

[SeverS]

+1

[puradox]

+1

[ghost]

+1

[Edmondton]

👍

[frenzzy]

Are these examples useful to you?

• https://jsfiddle.net/frenzzy/4ota5fag/3/
• https://jsfiddle.net/frenzzy/4ota5fag/2/

[Edmondton]

@frenzzy - it does help. thanks. any possible way to include them in the README or in some form of documentation.

[koistya]

https://twitter.com/koistya/status/741023710249914368

[sinnwell]

I'm trying to make something similar work using react-addons-transition-group to be able to code custom animations. Unfortunately widthStyles(s)(Component) does not pass through componentWillEnter(callback) and componentWillLeave(callback). Any tips?
This did not help me:
kriasoft/react-starter-kit#909 (comment)

[SeverS]

@sinnwell can you provide a fiddle? if you tried that solution from the comment it should have worked... i assume that the problem is somewhere else...

[sinnwell]

@SeverS

This is working. With ReactTransitionGroup.
https://jsfiddle.net/sinnwell/7u9tvrkb/13/

But using isomorphic-style-loader (copied the source and dependencies of withStyle)
https://jsfiddle.net/sinnwell/qqdatpj5/10/

The callback methods of the Animation component won't be called any longer.

[frenzzy]

Do not use any higher order components with ReactTransitionGroup, for example you can manually apply styles for your animation component:

import React from 'react';
import s from './your.css';

class Animation extends React.Component {
  static contextTypes = {
    insertCss: PropTypes.func,
  };

  componentWillMount() {
    this.removeCss = this.context.insertCss.apply(undefined, s);
  }

  componentWillUnmount() {
    setTimeout(this.removeCss, 0);
  }
  // ...
}

Or you can read discussion here: reduxjs/react-redux#303