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

#55: disable height animation on first auth panel render

Browse Source
This commit is contained in:
SleepWalker 2016-05-02 20:29:50 +03:00
parent 382da072e7
commit cc967c2c81
1 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -96,7 +96,7 @@ class PanelTransition extends Component {
} }
render() { render() {
const {canAnimateHeight, contextHeight, forceHeight} = this.state; const {contextHeight, forceHeight} = this.state;
const {Title, Body, Footer, Links} = this.props; const {Title, Body, Footer, Links} = this.props;
@ -111,6 +111,10 @@ class PanelTransition extends Component {
const formHeight = this.state[`formHeight${panelId}`] || 0; const formHeight = this.state[`formHeight${panelId}`] || 0;
// a hack to disable height animation on first render
const isHeightMeasured = this.isHeightMeasured;
this.isHeightMeasured = formHeight > 0;
return ( return (
<TransitionMotion <TransitionMotion
styles={[ styles={[
@ -119,7 +123,7 @@ class PanelTransition extends Component {
opacitySpring: spring(1, opacitySpringConfig) opacitySpring: spring(1, opacitySpringConfig)
}}, }},
{key: 'common', style: { {key: 'common', style: {
heightSpring: spring(forceHeight || formHeight, transformSpringConfig), heightSpring: isHeightMeasured ? spring(forceHeight || formHeight, transformSpringConfig) : formHeight,
switchContextHeightSpring: spring(forceHeight || contextHeight, changeContextSpringConfig) switchContextHeightSpring: spring(forceHeight || contextHeight, changeContextSpringConfig)
}} }}
]} ]}
@ -139,7 +143,7 @@ class PanelTransition extends Component {
const bodyHeight = { const bodyHeight = {
position: 'relative', position: 'relative',
height: `${canAnimateHeight ? common.style.heightSpring : formHeight}px` height: `${common.style.heightSpring}px`
}; };
return ( return (
@ -240,12 +244,7 @@ class PanelTransition extends Component {
onUpdateHeight = (height, key) => { onUpdateHeight = (height, key) => {
const heightKey = `formHeight${key}`; const heightKey = `formHeight${key}`;
// we need to skip first render, because there is no panel to make transition from
// const canAnimateHeight = Object.keys(this.state.height).length > 1 || this.state[heightKey];
const canAnimateHeight = true; // NOTE: lets try to always animate
this.setState({ this.setState({
canAnimateHeight,
[heightKey]: height [heightKey]: height
}); });
}; };