#136: popup animations

package.json

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

src/components/ui/popup/PopupStack.jsx

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

src/components/ui/popup/popup.scss

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