Add animation when sub-modes disappear in the header (codesandbox#145)

* Add hover animation to sub modes

* Keep the current sub modes visible until the animation has ended

Author: jseminck

src/app/components/sandbox/ModeIcons.js

@@ -3,24 +3,46 @@ import styled, { keyframes } from 'styled-components';
 
 import Tooltip from 'app/components/Tooltip';
 
-const animation = keyframes`
+const showAnimationKeyframes = keyframes`
   0%   { opacity: 0; transform: translateX(10px); }
   100% { opacity: 1; transform: translateX(0px); }
 `;
 
-const reverseAnimation = keyframes`
+const reverseShowAnimationKeyframes = keyframes`
   0%   { opacity: 0; transform: translateX(-10px); }
   100% { opacity: 1; transform: translateX(0px); }
 `;
 
-const delayAnimation = (delay: number = 0, reverse: boolean = true) =>
+const showAnimation = (delay: number = 0, reverse: boolean = true) =>
   `
-    animation: ${reverse ? reverseAnimation : animation} 0.3s;
+    animation: ${reverse
+      ? reverseShowAnimationKeyframes
+      : showAnimationKeyframes} 0.3s;
     animation-delay: ${delay}s;
     animation-fill-mode: forwards;
     opacity: 0;
   `;
 
+const hideAnimationKeyframes = keyframes`
+  0%   { opacity: 1; transform: translateX(0px); }
+  100% { opacity: 0; transform: translateX(10px); }
+`;
+
+const reverseHideAnimationKeyframes = keyframes`
+  0%   { opacity: 1; transform: translateX(0px); }
+  100% { opacity: 0; transform: translateX(-10px); }
+`;
+
+const hideAnimation = (delay: number = 0, reverse: boolean = true) =>
+  `
+    animation: ${reverse
+      ? reverseHideAnimationKeyframes
+      : hideAnimationKeyframes} 0.3s;
+    animation-delay: ${delay}s;
+    animation-fill-mode: forwards;
+    opacity: 1;
+  `;
+
 const Tooltips = styled.div`
   display: flex;
   align-items: center;
@@ -69,7 +91,10 @@ const Hover = styled.div`
 `;
 
 const SubMode = styled.div`
-  ${props => delayAnimation(props.i * 0.05, props.i === 1)};
+  ${props =>
+    props.hovering
+      ? showAnimation(props.i * 0.05, props.i === 1)
+      : hideAnimation(props.i * 0.05, props.i === 1)};
 `;
 
 const Icon = styled.div`
@@ -94,15 +119,15 @@ type Props = {
   setEditorView: () => void,
   setPreviewView: () => void,
   setMixedView: () => void,
-  noPreview: ?boolean,
+  noPreview: ?boolean
 };
 
 const getCurrentMode = ({
   showEditor,
   showPreview,
   setMixedView,
   setEditorView,
-  setPreviewView,
+  setPreviewView
 }: Props) => {
   const both = (
     <ViewIcon onClick={setMixedView} active={showEditor && showPreview}>
@@ -132,53 +157,92 @@ const getCurrentMode = ({
 };
 
 export default class ModeIcons extends React.PureComponent<Props> {
-  state = {
-    hovering: false,
-  };
+  constructor(props) {
+    super(props);
+
+    const { currentMode, otherModes } = getCurrentMode(this.props);
+
+    this.state = {
+      hovering: false,
+      showSubmodes: false,
+      currentMode,
+      otherModes
+    };
+  }
 
   onMouseEnter = () => {
     this.setState({
-      hovering: true,
+      showSubmodes: true,
+      hovering: true
     });
   };
 
   onMouseLeave = () => {
     this.setState({
-      hovering: false,
+      hovering: false
     });
   };
 
+  onAnimationEnd = () => {
+    const { currentMode, otherModes } = getCurrentMode(this.props);
+
+    if (!this.state.hovering) {
+      this.setState({
+        showSubmodes: false,
+        currentMode,
+        otherModes
+      });
+    }
+  };
+
+  componentWillReceiveProps(nextProps) {
+    const { currentMode, otherModes } = getCurrentMode(nextProps);
+
+    if (!this.state.hovering) {
+      this.setState({
+        currentMode,
+        otherModes
+      });
+    } else {
+      this.setState({
+        currentMode
+      });
+    }
+  }
+
   render() {
     const {
       showEditor,
       showPreview,
       setEditorView,
       setMixedView,
       setPreviewView,
-      dropdown,
+      dropdown
     } = this.props;
 
-    if (dropdown) {
-      const { currentMode, otherModes } = getCurrentMode(this.props);
+    const { hovering, showSubmodes, currentMode, otherModes } = this.state;
 
+    if (dropdown) {
       return (
         <Tooltips>
           <Hover onMouseLeave={this.onMouseLeave}>
-            {this.state.hovering &&
+            {showSubmodes &&
               <SubMode
                 onClick={this.onMouseLeave}
-                hovering={this.state.hovering}
+                onAnimationEnd={this.onAnimationEnd}
+                hovering={hovering}
                 i={0}
               >
                 {otherModes[0]}
               </SubMode>}
             <div onMouseEnter={this.onMouseEnter}>
               {currentMode}
             </div>
-            {this.state.hovering &&
+            {showSubmodes &&
               <SubMode
                 onClick={this.onMouseLeave}
-                hovering={this.state.hovering}
+                onAnimationEnd={this.onAnimationEnd}
+                hovering={hovering}
                 i={1}
               >
                 {otherModes[1]}