feat: make modal and popover animations consistent

ipfs-shipyard · Jul 17, 2018 · bb84be5 · bb84be5
1 parent 9744bd7
commit bb84be5
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 48 deletions.
diff --git a/src/components/modal/Modal.css b/src/components/modal/Modal.css
@@ -13,12 +13,12 @@
     max-height: calc(100vh - var(--spacing) * 2);
     overflow: auto;
     padding: var(--spacing);
-    transform: translate(-50%, calc(-50% + 2.5em));
+    transform: translate(-50%, -50%) scale(0.9);
     opacity: 0;
     background-color: var(--color-white);
     box-shadow: 0 0.7em 1.7em color(var(--color-black) alpha(0.15));
     font-size: 1rem;
-    transition: opacity 0.2s ease, transform 0.2s ease-out;
+    transition: opacity 0.2s 0.1s ease, transform 0.3s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
     &.after-open {
         transform: translate(-50%, -50%);
@@ -27,12 +27,15 @@
 
     &.before-close {
         opacity: 0;
-        transition: opacity 0.1s linear;
+        transition: opacity 0.15s ease;
     }
+}
 
-    & .content {
-        @mixin typography-body-1 em;
-    }
+.modal-content {
+    @mixin typography-body-1 em;
+
+    /* Prevent text from flickering in Webkit */
+    backface-visibility: hidden;
 }
 
 .modal-overlay {
@@ -50,7 +53,7 @@
 
     &.before-close {
         background-color: transparent;
-        transition: background-color 0.1s linear;
+        transition: background-color 0.15s ease;
     }
 }
 

diff --git a/src/components/modal/Modal.js b/src/components/modal/Modal.js
@@ -61,7 +61,7 @@ export default class Modal extends Component {
                 overlayClassName={ finalOverlayClassName }
                 portalClassName={ classNames(styles.modalPortal, portalClassName) }
                 bodyOpenClassName={ classNames(styles.modalBodyOpen, bodyOpenClassName) }>
-                <div className={ classNames(styles.content, contentClassName) }>
+                <div className={ classNames(styles.modalContent, contentClassName) }>
                     { children }
                 </div>
             </ReactModal>

diff --git a/src/components/popover/Popover.css b/src/components/popover/Popover.css
@@ -6,39 +6,38 @@
     top: 0;
     left: 0;
     z-index: 999999;
-    filter: drop-shadow(0 0.7em 1.6em color(var(--color-black) alpha(0.15)));
     font-size: 1rem;
-    transition: opacity 0.2s ease;
 
-    &.appear,
-    &.enter {
+    & .container {
+        position: relative;
+        transform: scale(0.9);
         opacity: 0;
+        filter: drop-shadow(0 0.7em 1.6em color(var(--color-black) alpha(0.15)));
+        transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }
 
-    &.appear-active,
-    &.enter-active {
-        opacity: 1;
+    &.enter-active,
+    &.enter-done {
+        & .container {
+            transform: scale(1);
+            opacity: 1;
+        }
     }
 
     &.exit {
-        opacity: 1;
-    }
-
-    &.exit-active {
-        opacity: 0;
+        & .container {
+            transform: scale(1);
+            transition: opacity 0.15s ease;
+        }
     }
 
-    & .container {
+    & .box {
         position: relative;
         z-index: 2;
         padding: 2em;
         background-color: var(--color-white);
         color: var(--color-black);
         text-align: left;
-
-        & .content {
-            @mixin typography-body-2 em;
-        }
     }
 
     & .arrow {
@@ -55,7 +54,7 @@
         }
 
         & .arrow {
-            bottom: 1em;
+            bottom: -1em;
             border-width: 1em 0.9em 0 0.9em;
             border-color: var(--color-white) transparent transparent transparent;
         }
@@ -67,7 +66,7 @@
         }
 
         & .arrow {
-            left: 1em;
+            left: -1em;
             border-width: 0.9em 1em 0.9em 0;
             border-color: transparent var(--color-white) transparent transparent;
         }
@@ -79,21 +78,28 @@
         }
 
         & .arrow {
-            top: 1em;
+            top: -1em;
             border-width: 0 0.9em 1em 0.9em;
             border-color: transparent transparent var(--color-white) transparent;
         }
     }
 
     &[data-placement="left"] {
         & {
-            padding-right: 2em !important;
+            padding-right: 2em;
         }
 
         & .arrow {
-            right: 1em;
+            right: -1em;
             border-width: 0.9em 0 0.9em 1em;
             border-color: transparent transparent transparent var(--color-white);
         }
     }
 }
+
+.popover-content {
+    @mixin typography-body-2 em;
+
+    /* Prevent text from flickering in Webkit */
+    backface-visibility: hidden;
+}
diff --git a/src/components/popover/Popover.js b/src/components/popover/Popover.js
@@ -63,17 +63,11 @@ export default class Popover extends Component {
                 unmountOnExit
                 timeout={ CLOSE_TRANSITION_DURATION }
                 classNames={ {
-                    appear: styles.appear,
-                    appearActive: styles.appearActive,
-                    enter: styles.enter,
                     enterActive: styles.enterActive,
+                    enterDone: styles.enterDone,
                     exit: styles.exit,
-                    exitActive: styles.exitActive,
                 } }>
-                <Popper
-                    placement={ placement }>
-                    { this.renderPopper }
-                </Popper>
+                <Popper placement={ placement }>{ this.renderPopper }</Popper>
             </CSSTransition>
         );
     }
@@ -82,6 +76,7 @@ export default class Popover extends Component {
         // Fix arrow not being positioned correctly in first render
         // See: https://github.com/FezVrasta/react-popper/issues/88
         if (!scheduleUpdate._forced) {
+            cancelAnimationFrame(this.scheduleUpdateRequestId);
             this.scheduleUpdateRequestId = requestAnimationFrame(() => scheduleUpdate());
 
             scheduleUpdate._forced = true;
@@ -110,17 +105,19 @@ export default class Popover extends Component {
                 onMouseLeave={ this.handleMouseLeave }
                 data-placement={ placement }>
 
-                <div ref={ this.storeContainerRef } className={ styles.container }>
-                    <div className={ classNames(styles.content, contentClassName) }>{ children }</div>
-                </div>
+                <div className={ styles.container }>
+                    <div ref={ this.storeBoxRef } className={ styles.box }>
+                        <div className={ classNames(styles.popoverContent, contentClassName) }>{ children }</div>
+                    </div>
 
-                <div ref={ arrowProps.ref } className={ styles.arrow } style={ arrowProps.style } />
+                    <div ref={ arrowProps.ref } className={ styles.arrow } style={ arrowProps.style } />
+                </div>
             </div>
         );
     };
 
-    storeContainerRef= (ref) => {
-        this.containerNode = ref;
+    storeBoxRef= (ref) => {
+        this.boxNode = ref;
     };
 
     addEscapeOutsideListeners() {
@@ -174,10 +171,10 @@ export default class Popover extends Component {
         this.mouseDownEventTarget = undefined;
 
         // Check if we clicked outside of the popover AND outside the reference as well
-        const isOutsideContainer = !this.containerNode || !this.containerNode.contains(target);
+        const isOutsideBox = !this.boxNode || !this.boxNode.contains(target);
         const isOutsideReference = !this.referenceNode || !this.referenceNode.contains(target);
 
-        if (isOutsideContainer && isOutsideReference) {
+        if (isOutsideBox && isOutsideReference) {
             this.props.onRequestClose && this.props.onRequestClose(e, 'clickOutside');
         }
     };

diff --git a/stories/modal.js b/stories/modal.js
@@ -39,9 +39,9 @@ storiesOf('Modal', module)
 ))
 .add('Within scrollable body', () => (
     <div style={ { height: 20000 } }>
-        <div style={ { height: 500 } } />
+        <div style={ { height: 200 } } />
 
-        <ModalTrigger modal={ <LoremIpsumModal isOpen /> }>
+        <ModalTrigger modal={ <LoremIpsumModal /> }>
             <Button variant="primary">Click me</Button>
         </ModalTrigger>
     </div>