universal-router
universal-router copied to clipboard
Transitions
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
+1
+1
+1
:+1:
Are these examples useful to you?
- https://jsfiddle.net/frenzzy/4ota5fag/3/
- https://jsfiddle.net/frenzzy/4ota5fag/2/
@frenzzy - it does help. thanks. any possible way to include them in the README or in some form of documentation.
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 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
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.
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