enable native transitions

packages/pebble-web/src/components/DropDown.tsx

@@ -90,7 +90,6 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
             )}
           </Reference>
 
-          {/* TODO: Add native flag. */}
           <MountTransition visible={_isDropDownOpen}>
             {transitionStyles => (
               <animated.div
@@ -103,17 +102,18 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
                       ...style,
                       ...transitionStyles,
                       backgroundColor: colors.white.base,
-                      transform: `${style.transform || ""} ${
-                        transitionStyles.transform || ""
-                      }`,
+                      transform:
+                        transitionStyles.transform?.interpolate(
+                          t => `${style.transform || ""} ${t}`
+                        ) || style.transform,
                       transformOrigin: `${arrowProps.style.left || 0}px ${
                         arrowProps.style.top || 0
                       }px`,
                       padding
                     };
 
                     return (
-                      <div
+                      <animated.div
                         className={cx(dropDownStyle, dropDownClassName)}
                         ref={ref}
                         style={popperWrapperStyle}
@@ -123,7 +123,7 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
                           toggle: this.toggleDropdown,
                           isOpen: _isDropDownOpen
                         })}
-                      </div>
+                      </animated.div>
                     );
                   }}
                 </Popper>

packages/pebble-web/src/components/Modal.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import { ModalProps } from "./typings/Modal";
 import { modalContainer } from "./styles/Modal.styles";
-import { cx, css } from "emotion";
+import { cx } from "emotion";
 import isBrowser from "is-in-browser";
 import * as ReactDOM from "react-dom";
 import MountTransition from "./shared/MountTransition";
+import { animated } from "react-spring/renderprops.cjs";
 
 class Modal extends React.PureComponent<ModalProps> {
   private node = isBrowser ? document.createElement("div") : null;
@@ -41,23 +42,21 @@ class Modal extends React.PureComponent<ModalProps> {
       // tslint:disable-next-line:jsx-wrap-multiline
       <MountTransition visible={visible}>
         {transitionStyles => (
-          <div
+          <animated.div
             style={{
               opacity: transitionStyles.opacity
             }}
             className={cx(modalContainer, backDropClassName)}
           >
-            <div
-              className={cx(
-                css({
-                  transform: transitionStyles.transform
-                }),
-                modalClassName
-              )}
+            <animated.div
+              style={{
+                transform: transitionStyles.transform
+              }}
+              className={modalClassName}
             >
               {children}
-            </div>
-          </div>
+            </animated.div>
+          </animated.div>
         )}
       </MountTransition>,
       node as NonNullable<typeof node>

packages/pebble-web/src/components/Popper.tsx

@@ -6,6 +6,7 @@ import { colors } from "pebble-shared";
 import { cx } from "emotion";
 import OutsideClick from "./OutsideClick";
 import MountTransition from "./shared/MountTransition";
+import { animated } from "react-spring/renderprops.cjs";
 
 export default class PebblePopper extends React.PureComponent<
   PopperProps,
@@ -71,16 +72,17 @@ export default class PebblePopper extends React.PureComponent<
                     ...style,
                     ...transitionStyles,
                     backgroundColor: popperBackgroundColor,
-                    transform: `${style.transform || ""} ${
-                      transitionStyles.transform || ""
-                    }`,
+                    transform:
+                      transitionStyles.transform?.interpolate(
+                        t => `${style.transform || ""} ${t}`
+                      ) || style.transform,
                     transformOrigin: `${arrowProps.style.left || 0}px ${
                       arrowProps.style.top || 0
                     }px`
                   };
 
                   return (
-                    <div
+                    <animated.div
                       className={cx(popperStyle, popperClassName)}
                       ref={ref}
                       style={wrapperStyle}
@@ -101,7 +103,7 @@ export default class PebblePopper extends React.PureComponent<
                       >
                         ▶
                       </div>
-                    </div>
+                    </animated.div>
                   );
                 }}
               </Popper>

packages/pebble-web/src/components/Sidebar.tsx

@@ -61,10 +61,10 @@ class SideBar extends React.PureComponent<SidebarProps> {
 
     return (
       <MountTransition visible={isOpen} {...transitionProps}>
-        {styles => (
+        {transitionStyles => (
           <>
             <animated.div
-              style={{ opacity: styles.opacity }}
+              style={{ opacity: transitionStyles.opacity }}
               className={sidebarWrapperStyle}
               onClick={
                 onOutsideClick || closeOnOutsideClick
@@ -74,7 +74,7 @@ class SideBar extends React.PureComponent<SidebarProps> {
               data-testid="shadowArea"
             />
 
-            <animated.div className={_sidebarStyle} style={styles}>
+            <animated.div className={_sidebarStyle} style={transitionStyles}>
               <div className={closeStyle} onClick={onClose}>
                 <i className="pi pi-close" />
                 <Ink />

packages/pebble-web/src/components/shared/MountTransition.tsx

@@ -6,23 +6,26 @@ import {
 } from "react-spring/renderprops.cjs";
 import { animationConfig } from "../../utils/animation";
 import { Omit } from "utility-types";
+import { AnimatedValue } from "react-spring";
+
+type TransitionStyles = AnimatedValue<React.CSSProperties>;
 
 interface MountTransitionProps
   extends Omit<Omit<TransitionProps<boolean>, "items">, "children"> {
   visible: boolean;
   children: (
-    params: React.CSSProperties,
+    styles: TransitionStyles,
     state: State,
     index: number
   ) => React.ReactNode;
 }
 
 const MountTransition: React.FunctionComponent<MountTransitionProps> = props => {
   return (
-    <Transition items={props.visible} {...animationConfig} {...props}>
+    <Transition native items={props.visible} {...animationConfig} {...props}>
       {(show, state, index) =>
         show &&
-        (styles => props.children(styles as React.CSSProperties, state, index))
+        (styles => props.children(styles as TransitionStyles, state, index))
       }
     </Transition>
   );

packages/pebble-web/src/utils/animation.ts

@@ -1,9 +1,14 @@
-import { State } from "react-spring";
+import { State, SpringConfig } from "react-spring";
+
+const isProd = process.env.NODE_ENV === "production";
+
+const [duration, durationLeave] = isProd ? [200, 80] : [1000, 500];
 
 export const animationConfig = {
   from: { opacity: 0, transform: "scale(0.95)" },
   enter: { opacity: 1, transform: "scale(1)" },
   leave: { opacity: 0, transform: "scale(0.95)", pointerEvents: "none" },
-  config: (_a: boolean, motion: State) =>
-    motion === "leave" ? { duration: 80 } : { duration: 200 }
+  config: (_a: boolean, motion: State): SpringConfig => ({
+    duration: motion === "leave" ? durationLeave : duration
+  })
 };