ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-11-30 02:32:58 +05:30
Code Issues Packages Projects Releases Wiki Activity

Прототип анимации смены контекста

Browse Source
This commit is contained in:
SleepWalker 2016-02-02 20:02:00 +02:00
parent 306d0641fb
commit 8792333131
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/auth/PanelTransition.jsx
View File

@ -22,8 +22,14 @@ export default class PanelTransition extends Component {
componentWillReceiveProps() { componentWillReceiveProps() {
this.setState({ this.setState({
forceHeight: window.forceHeight,
previousRoute: this.props.location previousRoute: this.props.location
}); });
setTimeout(() => {
this.setState({forceHeight: 0});
window.forceHeight = 0;
}, 100);
} }
render() { render() {
@ -44,7 +50,7 @@ export default class PanelTransition extends Component {
opacitySpring: spring(1) opacitySpring: spring(1)
}, },
common: { common: {
heightSpring: spring(height[path] || 0, heightSpringConfig) heightSpring: spring(this.state.forceHeight || height[path] || 0, heightSpringConfig)
} }
}} }}
willEnter={this.willEnter} willEnter={this.willEnter}
@ -100,7 +106,7 @@ export default class PanelTransition extends Component {
'/register': -1, '/register': -1,
'/password': 1, '/password': 1,
'/activation': 1, '/activation': 1,
'/oauth/permissions': 1 '/oauth/permissions': -1
}; };
var sign = map[key]; var sign = map[key];
@ -117,7 +123,7 @@ export default class PanelTransition extends Component {
'/register': -1, '/register': -1,
'/password': 1, '/password': 1,
'/activation': 1, '/activation': 1,
'/oauth/permissions': 1 '/oauth/permissions': -1
}; };
var sign = map[key]; var sign = map[key];
@ -201,16 +207,20 @@ export default class PanelTransition extends Component {
var direction = map[key]; var direction = map[key];
var verticalOrigin = 'top';
if (direction === 'Y') { if (direction === 'Y') {
transformSpring = Math.abs(transformSpring); transformSpring = Math.abs(transformSpring);
if (prev === key) { if (prev === key) {
transformSpring *= -1; transformSpring *= -1;
} }
verticalOrigin = 'bottom';
window.forceHeight = 1;
} }
var style = { var style = {
position: 'absolute', position: 'absolute',
top: 0, [verticalOrigin]: 0,
left: 0, left: 0,
width: '100%', width: '100%',
WebkitTransform: `translate${direction}(${transformSpring}%)`, WebkitTransform: `translate${direction}(${transformSpring}%)`,