better contact button animation

DreaminDani · Oct 25, 2018 · 8b70380 · 8b70380
1 parent ad56a7a
commit 8b70380
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 96 deletions.
diff --git a/components/molecules/ContactButton.js b/components/molecules/ContactButton.js
@@ -48,10 +48,12 @@ class ContactButton extends React.Component {
 
 ContactButton.defaultProps = {
   classes: {},
+  hidden: false,
 };
 
 ContactButton.propTypes = {
   classes: PropTypes.object,
+  hidden: PropTypes.bool,
 };
 
 export default withStyles(styles)(ContactButton);
diff --git a/components/molecules/ContactRow.js b/components/molecules/ContactRow.js
@@ -6,14 +6,10 @@ import Button from '@material-ui/core/Button';
 import EmailIcon from '@material-ui/icons/Email';
 import PhoneIcon from '@material-ui/icons/Phone';
 import CalendarIcon from '@material-ui/icons/Event';
-import { Animated } from 'react-web-animation';
+import Grow from '@material-ui/core/Grow';
 
 const styles = theme => ({
   emailIcon: {
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.shorter,
-      easing: theme.transitions.easing.easeOut,
-    }),
     margin: theme.spacing.unit,
     width: 40,
     height: 40,
@@ -23,10 +19,6 @@ const styles = theme => ({
     zIndex: 100,
   },
   phoneIcon: {
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.shorter,
-      easing: theme.transitions.easing.easeOut,
-    }),
     margin: theme.spacing.unit,
     width: 40,
     height: 40,
@@ -36,10 +28,6 @@ const styles = theme => ({
     zIndex: 100,
   },
   calendarIcon: {
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.shorter,
-      easing: theme.transitions.easing.easeOut,
-    }),
     margin: theme.spacing.unit,
     width: 40,
     height: 40,
@@ -54,91 +42,27 @@ const styles = theme => ({
   },
 });
 
-function fadeIn() {
-  return [
-    { opacity: '0', offset: 0 },
-    { opacity: '1', offset: 1 },
-  ];
-}
-
-function fadeOut() {
-  return [
-    { opacity: '1', offset: 0 },
-    { opacity: '0', offset: 1 },
-  ];
-}
-
 class ContactRow extends React.Component {
-  state = {
-    playState: 'idle',
-    hasOpened: false,
-  };
-
-  getStyle() {
-    // hacky - should fix with redux
-    if ((this.state.hasOpened && this.props.open)
-        || (this.state.hasOpened && !this.props.open)) {
-      return { opacity: 1 };
-    }
-    return { opacity: 0 };
-  }
-
-  getParentStyle() {
-    if (!this.props.open && this.state.hasOpened) {
-      this.setState({ hasOpened: false });
-      return { display: 'block' };
-    } if (this.props.open) {
-      return { display: 'block' };
-    }
-    return { display: 'none' };
-  }
-
-  getTiming(duration, delay) {
-    return {
-      duration,
-      easing: 'ease-in-out',
-      delay: (this.props.open)
-        ? delay
-        : (this.transitionTime - delay),
-      iterations: 1,
-      direction: 'alternate',
-      fill: 'forwards',
-    };
-  }
-
-  animateOut = () => {
-    /* eslint-disable-next-line no-unused-expressions */
-    (this.props.open)
-      ? this.setState({ playState: 'idle', hasOpened: true })
-      : this.setState({ playState: 'idle', hasOpened: false });
-  }
-
-  transitionTime = 100;
-
   render() {
     const { classes, open } = this.props;
 
     return (
-      <div style={this.getParentStyle()}>
-        <Animated.div
-          playState={this.state.playState}
-          keyframes={(open) ? fadeIn() : fadeOut()}
-          timing={this.getTiming(this.transitionTime, 0)}
-          style={this.getStyle()}
-        >
+      <React.Fragment>
+        <Grow mountOnEnter unmountOnExit in={open} style={{ transformOrigin: 'bottom' }} {...(open ? { timeout: 200 } : {})}>
           <a href="mailto:daniel@desandoval.net">
             <Tooltip classes={{ popper: classes.tooltipText }} title="Email me" placement="left">
               <Button variant="fab" className={classes.emailIcon}>
                 <EmailIcon dense="true" />
               </Button>
             </Tooltip>
           </a>
-        </Animated.div>
-        <Animated.div
-          playState={this.state.playState}
-          keyframes={(open) ? fadeIn() : fadeOut()}
-          timing={this.getTiming(this.transitionTime, this.transitionTime / 2)}
-          style={this.getStyle()}
+        </Grow>
+        <Grow
+          mountOnEnter
+          unmountOnExit
+          in={open}
+          style={{ transformOrigin: 'bottom' }}
+          {...(open ? { timeout: 400 } : {})}
         >
           <a href="tel:+15417198286">
             <Tooltip classes={{ popper: classes.tooltipText }} title="Call me" placement="left">
@@ -147,13 +71,13 @@ class ContactRow extends React.Component {
               </Button>
             </Tooltip>
           </a>
-        </Animated.div>
-        <Animated.div
-          playState={this.state.playState}
-          keyframes={(open) ? fadeIn() : fadeOut()}
-          timing={this.getTiming(this.transitionTime, this.transitionTime)}
-          onFinish={this.animateOut}
-          style={this.getStyle()}
+        </Grow>
+        <Grow
+          mountOnEnter
+          unmountOnExit
+          in={open}
+          style={{ transformOrigin: 'bottom' }}
+          {...(open ? { timeout: 600 } : {})}
         >
           <a href="https://calendly.com/d3sandoval/30min" target="_blank" rel="noopener noreferrer">
             <Tooltip classes={{ popper: classes.tooltipText }} title="Schedule a call" placement="left">
@@ -162,9 +86,8 @@ class ContactRow extends React.Component {
               </Button>
             </Tooltip>
           </a>
-        </Animated.div>
-      </div>
-
+        </Grow>
+      </React.Fragment>
     );
   }
 }