search field animation

package.json

@@ -54,6 +54,7 @@
     "react-modal": "^3.5.1",
     "react-qr-svg": "^2.1.0",
     "react-time": "^4.3.0",
+    "react-transition-group": "^2.4.0",
     "slugify": "^1.3.1",
     "vex-js": "^4.1.0"
   },

src/components/Layout.module.scss

@@ -22,6 +22,8 @@
 /////////////////////////////////////
 
 .document {
+    @include transition;
+
     width: 100%;
     padding-top: ($spacer * 2);
     background-color: $page-background-color;
@@ -36,8 +38,6 @@
     }
 
     @media (min-width: $screen-sm) {
-        @include transition;
-
         margin-top: $spacer * 2.65;
         margin-bottom: $spacer * 20; // height of footer
         position: relative;

src/components/molecules/Search.jsx

@@ -1,6 +1,7 @@
 import React, { PureComponent, Fragment } from 'react'
 // import { Link } from 'gatsby'
 import Helmet from 'react-helmet'
+import { CSSTransition } from 'react-transition-group'
 import Input from '../atoms/Input'
 import SearchIcon from '../svg/MagnifyingGlass'
 import styles from './Search.module.scss'
@@ -10,9 +11,7 @@ class Search extends PureComponent {
     super(props)
 
     this.state = {
-      searchOpen: false,
+      searchOpen: false
-      query: '',
-      results: []
     }
   }
 
@@ -40,13 +39,19 @@ class Search extends PureComponent {
         </button>
 
         {this.state.searchOpen && (
+          <CSSTransition
+            appear={this.state.searchOpen}
+            in={this.state.searchOpen}
+            timeout={200}
+            classNames={styles}
+          >
             <section className={styles.search}>
               <Input
                 autoFocus
                 type="search"
                 placeholder="Search everything"
                 onBlur={this.toggleSearch}
-              value={this.state.query}
+                // value={this.state.query}
                 // onChange={this.search}
               />
               <button
@@ -56,6 +61,7 @@ class Search extends PureComponent {
                 &times;
               </button>
             </section>
+          </CSSTransition>
         )}
       </Fragment>
     )

src/components/molecules/Search.module.scss

@@ -38,16 +38,15 @@
     right: $spacer / 2;
     top: 0;
     z-index: 10;
-    // transition: transform .3s ease-out;
-    // transform: translate3d(0, -150%, 0);
-
-    // :global(.has-search-open) & {
-    //     transform: translate3d(0, 0, 0);
-    // }
 
     input {
         width: 100%;
     }
+
+    @media (min-width: $screen-md) {
+        left: 0;
+        right: 0;
+    }
 }
 
 .searchInputClose {
@@ -55,3 +54,27 @@
     right: $spacer / 4;
     top: $spacer / 4;
 }
+
+.appear,
+.enter {
+    opacity: .01;
+    transform: translate3d(0, -100px, 0);
+
+    &.appearActive,
+    &.enterActive {
+        opacity: 1;
+        transition: 200ms cubic-bezier(.4, 1.72, .61, .7);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.exit {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+
+    &.exitActive {
+        opacity: .01;
+        transition: 200ms ease-in;
+        transform: translate3d(0, -100px, 0);
+    }
+}