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

This commit is contained in:
SleepWalker 2016-01-27 07:04:03 +02:00
parent 1acabe5fdc
commit bea442c04b
4 changed files with 36 additions and 11 deletions

View File

@ -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",

View File

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

View File

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

View File

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