#136: popup animations

This commit is contained in:
SleepWalker 2016-06-03 22:38:59 +03:00
parent aa833cd495
commit 085922290f
3 changed files with 67 additions and 2 deletions

View File

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

View File

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

View File

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