universal-router icon indicating copy to clipboard operation
universal-router copied to clipboard

Transitions

Open ChrisCinelli opened this issue 9 years ago • 11 comments

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).

ChrisCinelli avatar Nov 02 '15 08:11 ChrisCinelli

+1

SeverS avatar Jan 04 '16 00:01 SeverS

+1

puradox avatar Jan 23 '16 01:01 puradox

+1

ghost avatar Apr 13 '16 18:04 ghost

:+1:

Edmondton avatar May 25 '16 21:05 Edmondton

Are these examples useful to you?

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

frenzzy avatar May 31 '16 20:05 frenzzy

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

Edmondton avatar May 31 '16 20:05 Edmondton

universal-router https://twitter.com/koistya/status/741023710249914368

koistya avatar Jun 09 '16 22:06 koistya

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: https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542

sinnwell avatar Feb 28 '17 20:02 sinnwell

@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...

SeverS avatar Feb 28 '17 21:02 SeverS

@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.

sinnwell avatar Mar 01 '17 20:03 sinnwell

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: https://github.com/reactjs/react-redux/issues/303

frenzzy avatar Mar 02 '17 08:03 frenzzy