Animate the overlays (fixes #570)

package.json

@@ -134,6 +134,7 @@
     "normalizr": "2.1.0",
     "piping": "0.3.2",
     "react": "15.1.0",
+    "react-addons-css-transition-group": "15.1.0",
     "react-cookie": "0.4.6",
     "react-helmet": "3.1.0",
     "react-redux": "4.4.5",

src/disco/components/Addon.js

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { sprintf } from 'jed';
 import React, { PropTypes } from 'react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import { connect } from 'react-redux';
 import translate from 'core/i18n/translate';
 import purify from 'core/purify';
@@ -87,14 +88,14 @@ export class Addon extends React.Component {
   }
 
   getError() {
-    return this.props.status === ERROR ? (<div className="notification error">
+    return this.props.status === ERROR ? (<div className="notification error" key="error-overlay">
       <p className="message">{this.errorMessage()}</p>
       <a className="close" href="#" onClick={this.closeError}>Close</a>
     </div>) : null;
   }
 
   getRestart() {
-    return this.props.needsRestart ? (<div className="notification restart">
+    return this.props.needsRestart ? (<div className="notification restart" key="restart-overlay">
       <p className="message">{this.restartMessage()}</p>
     </div>) : null;
   }
@@ -192,8 +193,14 @@ export class Addon extends React.Component {
         {this.getThemeImage()}
         {this.getLogo()}
         <div className="content">
-          {this.getError()}
-          {this.getRestart()}
+          <ReactCSSTransitionGroup
+            transitionName="overlay"
+            transitionEnterTimeout={700}
+            transitionLeaveTimeout={300}
+          >
+            {this.getError()}
+            {this.getRestart()}
+          </ReactCSSTransitionGroup>
           <div className="copy">
             <h2
               ref="heading"

src/disco/css/Addon.scss

@@ -105,6 +105,27 @@ $addon-padding: 20px;
     right: 0;
     top: 0;
 
+    &.overlay-enter.overlay-enter-active {
+      transition: 300ms cubic-bezier(.19,.95,.39,1) 400ms;
+    }
+
+    &.overlay-enter {
+      opacity: 0;
+      transform: scale(1.1);
+    }
+
+    &.overlay-leave.overlay-leave-active {
+      opacity: 0;
+      transform: scale(0.9);
+      transition: 300ms cubic-bezier(.19,.95,.39,1);
+    }
+
+    &.overlay-leave,
+    &.overlay-enter.overlay-enter-active {
+      opacity: 1;
+      transform: scale(1);
+    }
+
     &.error {
       background: #c33c32 url('../img/warning.svg') no-repeat calc(100% - 40px) 50%;
       z-index: 20;