Added transition to modal

public/modal/Modal.jsx

@@ -22,7 +22,11 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { Button } from './../input/Input';
+import { openModal, closeModal } from './../actions/ModalActions';
 
 class Modal extends React.Component {
   constructor(props) {
@@ -35,32 +39,72 @@ class Modal extends React.Component {
       junk.push(<div  key={x}>Hello World</div>);
     }
 
+    //Add necessary buttons
     let buttons;
-    if(this.props.buttons || true) {
+    if(this.props.buttons) buttons = this.props.button;
-      buttons = (
-        <div className="o-modal__box-footer">
-          <Button>Test</Button>
-        </div>
-      );
-    }
 
-    return (
+    //Create our modal contents
+    let contents = (
       <div className="o-modal">
         <div className="o-modal__inner">
-          <div className="o-modal__backdrop"></div>
+          <div className="o-modal__backdrop" onClick={this.props.closeModal}>
+          </div>
 
           <div className="o-modal__box">
-            <div className="o-modal__box-body">
+            <div className="o-modal__box-inner">
-              <div className="o-modal__box-body-inner">
+              <div className="o-modal__box-body">
-                { junk }
+                <div className="o-modal__box-body-inner">
+                  { junk }
+                </div>
+              </div>
+
+              <div className="o-modal__box-footer">
+                { buttons }
               </div>
             </div>
-            { buttons }
           </div>
         </div>
       </div>
     );
+
+    //Display?
+    let displayedContents = <div></div>;
+
+    if(this.props.modal.open) {
+      displayedContents = (
+        <CSSTransition
+          appear={true}
+          timeout={200}
+          classNames="o-modal__transition"
+          mountOnEnter={ true }
+          unmountOnExit={ true }
+          key="modal"
+        >
+          { contents }
+        </CSSTransition>
+      );
+    }
+
+    //Wrap entire contents of modal in transitional container.
+    return (
+      <TransitionGroup className="o-modal__transition-container">
+        { displayedContents }
+      </TransitionGroup>
+    );
   }
 }
 
-module.exports = Modal;
+const mapStateToProps = (state) => {
+  return {
+    modal: state.modal
+  };
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({
+    openModal: openModal,
+    closeModal: closeModal
+  },dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Modal);

public/styles/objects/_modal.scss

@@ -14,6 +14,8 @@ $o-modal--backdrop: rgba(0, 0, 0, 0.7);
 $o-modal--background: white;
 $o-modal--padding: 0.5em;
 
+$o-modal--transition: 0.2s $s-animation--ease-out;
+
 .o-modal {
   position: fixed;
   top: 0;
@@ -35,26 +37,41 @@ $o-modal--padding: 0.5em;
     width: 100%;
     height: 100%;
     background: $o-modal--backdrop;
+
+    //Transition Properties
+    transition: opacity #{$o-modal--transition};
+    opacity: 0;
   }
 
   &__box {
     @include t-absolute-center-x-y();
-    @extend %t-dp--shadow;
-    @extend %t-flexbox;
-    @include t-flex-wrap(wrap);
-    @include t-flex-direction(column);
-    @include t-align-items(flex-start);
-    @include t-align-content(flex-start);
-    background: $o-modal--background;
     width: 100%;
     height: 100%;
     max-width: 95%;
     max-height: 95%;
 
-    &-body {
+    &-inner {
-      width: 100%;
-      @include t-flex-grow(1);
       position: relative;
+      @extend %t-flexbox;
+      @include t-flex-wrap(wrap);
+      @include t-flex-direction(column);
+      @include t-align-items(flex-start);
+      @include t-align-content(flex-start);
+      @extend %t-dp--shadow;
+      width: 100%;
+      height: 100%;
+      background: $o-modal--background;
+
+      //Transition properties
+      transition: all #{$o-modal--transition};
+      @include t-scale(0.4);
+      opacity: 0;
+    }
+
+    &-body {
+      position: relative;
+      @include t-flex-grow(1);
+      width: 100%;
 
       /* Unfortunately flex can only get us half way there */
       &-inner {//Hacks our content so it will never overflow its container.
@@ -80,4 +97,33 @@ $o-modal--padding: 0.5em;
       height: 600px;
     }
   }
+
+  //Transition related
+  &__transition {
+    &-container {}//Top level container
+
+    //Entry animation
+    &-enter {
+      &-active {}
+      &-done {}
+
+      &-active,&-done {
+        .o-modal__backdrop {
+          opacity: 1;
+        }
+
+        .o-modal__box-inner {
+          @include t-scale(1);
+          opacity: 1;
+        }
+      }
+    }
+
+    //Exit animation
+    &-exit {
+      &-active {}
+      &-done {
+      }
+    }
+  }
 }