Вроде бы сделал анимацию

package.json

@@ -21,7 +21,7 @@
     "react": "^0.14.0",
     "react-dom": "^0.14.3",
     "react-helmet": "^2.3.1",
-    "react-intl": "^2.0.0-pr-3",
+    "react-intl": "^2.0.0-beta-2",
     "react-motion": "^0.3.1",
     "react-redux": "^4.0.0",
     "react-router": "^2.0.0-rc5",

src/index.js

@@ -22,6 +22,19 @@ import routes from 'routes';
 
 import 'index.scss';
 
+// TODO: временная мера против Intl, который беспощадно спамит консоль
+if (process.env.NODE_ENV !== 'production') {
+    const originalConsoleError = console.error;
+    if (console.error === originalConsoleError) {
+        console.error = (...args) => {
+            if (args[0].indexOf('[React Intl] Missing message:') === 0) {
+                return;
+            }
+            originalConsoleError.call(console, ...args);
+        };
+    }
+}
+
 const reducer = combineReducers({
     ...reducers,
     routing: routeReducer

src/pages/auth/AuthPage.jsx

@@ -82,6 +82,7 @@ class AuthPage extends Component {
 
 import { FormattedMessage as Message } from 'react-intl';
 import Helmet from 'react-helmet';
+import ReactHeight from 'react-height';
 
 import panelStyles from 'components/ui/panel.scss';
 import buttons from 'components/ui/buttons.scss';
@@ -97,29 +98,30 @@ import passwordMessages from 'components/auth/Password.messages';
 const opacitySpringConfig = [200, 20];
 const heightSpringConfig = [200, 18];
 const transformSpringConfig = [500, 20];
-const firstPageHeight = 70;
-const secondPageHeight = 280;
 
 // TODO: сделать более быстрый фейд на горизонтальном скролле
 
 class TheDemo extends Component {
     state = {
-        isFirstPage: true
+        isFirstPage: true,
+        height: {}
     };
 
     render() {
         var {isFirstPage} = this.state;
 
+        var path = `page${isFirstPage ? '1' : '2'}`;
+
         return (
             <TransitionMotion
                 styles={{
-                    [`page${isFirstPage ? '1' : '2'}`]: {
+                    [path]: {
                         isFirstPage,
                         transformSpring: spring(0),
                         opacitySpring: spring(1)
                     },
                     common: {
-                        heightSpring: spring(this.state.isFirstPage ? firstPageHeight : secondPageHeight, heightSpringConfig)
+                        heightSpring: spring(this.state.height[path] || 0, heightSpringConfig)
                     }
                 }}
                 willEnter={this.willEnter}
@@ -128,7 +130,7 @@ class TheDemo extends Component {
                 {(items) => {
                     var keys = Object.keys(items).filter((key) => key !== 'common');
                     return (
-                        <div style={{height: '500px'}}>
+                        <div>
                             <Panel>
                                 <PanelHeader>
                                     <div style={{
@@ -203,11 +205,11 @@ class TheDemo extends Component {
         };
 
         return (isFirstPage ? (
-            <div key={`body${key}`} style={style}>
+            <ReactHeight key={`body${key}`} style={style} onHeightReady={this.updateHeight}>
                 <Input icon="envelope" type="email" placeholder={messages.emailOrUsername} />
-            </div>
+            </ReactHeight>
         ) : (
-            <div key={`body${key}`} style={style}>
+            <ReactHeight key={`body${key}`} style={style} onHeightReady={this.updateHeight}>
                 <Input icon="user" color="blue" type="text" placeholder={regMessages.yourNickname} />
                 <Input icon="envelope" color="blue" type="email" placeholder={regMessages.yourEmail} />
                 <Input icon="key" color="blue" type="password" placeholder={regMessages.accountPassword} />
@@ -222,10 +224,19 @@ class TheDemo extends Component {
                         )
                     }} />
                 } />
-            </div>
+            </ReactHeight>
         ));
     }
 
+    updateHeight = (height) => {
+        this.setState({
+            height: {
+                ...this.state.height,
+                [`page${this.state.isFirstPage ? '1' : '2'}`]: height
+            }
+        });
+    };
+
     getFooter(key, props) {
         var {isFirstPage, opacitySpring} = props;
 

webpack.config.js

@@ -14,6 +14,7 @@ var iconfontImporter = require('./webpack/node-sass-iconfont-importer');
  * TODO: dev tools https://github.com/freeqaz/redux-simple-router-example/blob/master/index.jsx
  * https://github.com/glenjamin/ultimate-hot-reloading-example ( обратить внимание на плагины babel )
  * https://github.com/gajus/react-css-modules ( + BrowserSync)
+ * https://github.com/reactuate/reactuate
  *
  * Inspiration projects:
  * https://github.com/davezuko/react-redux-starter-kit