mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-11-08 17:12:25 +05:30
#136: popup animations
This commit is contained in:
parent
aa833cd495
commit
085922290f
@ -24,6 +24,7 @@
|
||||
"intl-messageformat": "^1.1.0",
|
||||
"promise.prototype.finally": "^1.0.1",
|
||||
"react": "^15.0.0",
|
||||
"react-addons-css-transition-group": "^15.1.0",
|
||||
"react-dom": "^15.0.0",
|
||||
"react-helmet": "^3.1.0",
|
||||
"react-intl": "^2.0.0",
|
||||
|
@ -1,5 +1,7 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
|
||||
import styles from './popup.scss';
|
||||
|
||||
export class PopupStack extends Component {
|
||||
@ -17,7 +19,14 @@ export class PopupStack extends Component {
|
||||
const {popups} = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName={{
|
||||
enter: styles.trEnter,
|
||||
leave: styles.trLeave
|
||||
}}
|
||||
transitionEnterTimeout={500}
|
||||
transitionLeaveTimeout={500}
|
||||
>
|
||||
{popups.map((popup, index) => {
|
||||
const Popup = popup.type;
|
||||
|
||||
@ -38,7 +47,7 @@ export class PopupStack extends Component {
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ReactCSSTransitionGroup>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -86,6 +86,7 @@ $popupPadding: 20px;
|
||||
color: rgba(#000, 0.4);
|
||||
background: rgba(#000, 0);
|
||||
transition: 0.25s;
|
||||
transform: translateX(0);
|
||||
|
||||
&:hover {
|
||||
color: rgba(#000, 0.6);
|
||||
@ -99,3 +100,57 @@ $popupPadding: 20px;
|
||||
padding: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Transition states
|
||||
*/
|
||||
.trEnter {
|
||||
opacity: 0;
|
||||
|
||||
.popup {
|
||||
opacity: 0;
|
||||
transform: translateY(-30%);
|
||||
}
|
||||
|
||||
&-active {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease-in;
|
||||
|
||||
.popup {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trLeave {
|
||||
opacity: 1;
|
||||
|
||||
.popup {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&-active {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in;
|
||||
|
||||
.popup {
|
||||
opacity: 0;
|
||||
transform: translateY(30%);
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trEnter,
|
||||
.trLeave {
|
||||
.close {
|
||||
// do not show close during transition, because transform forces position: fixed
|
||||
// to layout relative container, instead of body
|
||||
opacity: 0;
|
||||
transform: translate(100%);
|
||||
transition: 0s;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user