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

Убрал обрезание элементов формы через overflow. Сделал более плавную анимацию вертикального крола титлов. Немного поднастроил пружины всех анимаций

Browse Source
This commit is contained in:
SleepWalker
2016-01-23 11:21:02 +02:00
parent 0ae0c7fa92
commit 1acabe5fdc
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/auth/AuthPage.jsx
View File

@@ -94,12 +94,14 @@ import regMessages from 'components/auth/Register.messages';
import {helpLinks as helpLinksStyles} from 'components/auth/helpLinks.scss'; import {helpLinks as helpLinksStyles} from 'components/auth/helpLinks.scss';
import passwordMessages from 'components/auth/Password.messages'; import passwordMessages from 'components/auth/Password.messages';
const opacitySpringConfig = [60, 15]; const opacitySpringConfig = [200, 20];
const heightSpringConfig = springConfig; const heightSpringConfig = [200, 18];
const transformSpringConfig = [400, 15]; const transformSpringConfig = [500, 20];
const firstPageHeight = 70; const firstPageHeight = 70;
const secondPageHeight = 280; const secondPageHeight = 280;
// TODO: сделать более быстрый фейд на горизонтальном скролле
class TheDemo extends Component { class TheDemo extends Component {
state = { state = {
isFirstPage: true isFirstPage: true
@@ -137,11 +139,12 @@ class TheDemo extends Component {
{keys.map((key) => this.getHeader(key, items[key]))} {keys.map((key) => this.getHeader(key, items[key]))}
</div> </div>
</PanelHeader> </PanelHeader>
<PanelBody> <PanelBody style={{
overflow: 'hidden'
}}>
<div style={{ <div style={{
position: 'relative', position: 'relative',
height: `${items.common.heightSpring}px`, height: `${items.common.heightSpring}px`
overflow: 'hidden'
}}> }}>
{keys.map((key) => this.getBody(key, items[key]))} {keys.map((key) => this.getBody(key, items[key]))}
</div> </div>
@@ -194,6 +197,7 @@ class TheDemo extends Component {
top: 0, top: 0,
left: 0, left: 0,
width: '100%', width: '100%',
WebkitTransform: `translateX(${transformSpring}%)`,
transform: `translateX(${transformSpring}%)`, transform: `translateX(${transformSpring}%)`,
opacity: opacitySpring opacity: opacitySpring
}; };
@@ -255,12 +259,14 @@ class TheDemo extends Component {
}; };
var scrollStyle = { var scrollStyle = {
WebkitTransform: `translateY(${transformSpring}%)`,
transform: `translateY(${transformSpring}%)` transform: `translateY(${transformSpring}%)`
}; };
var sideScrollStyle = { var sideScrollStyle = {
position: 'relative', position: 'relative',
zIndex: 2, zIndex: 2,
WebkitTransform: `translateX(${-Math.abs(transformSpring)}%)`,
transform: `translateX(${-Math.abs(transformSpring)}%)` transform: `translateX(${-Math.abs(transformSpring)}%)`
}; };