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,
-      query: '',
-      results: []
+      searchOpen: false
     }
   }
 
@@ -40,22 +39,29 @@ class Search extends PureComponent {
         </button>
 
         {this.state.searchOpen && (
-          <section className={styles.search}>
-            <Input
-              autoFocus
-              type="search"
-              placeholder="Search everything"
-              onBlur={this.toggleSearch}
-              value={this.state.query}
-              // onChange={this.search}
-            />
-            <button
-              className={styles.searchInputClose}
-              onClick={this.toggleSearch}
-            >
-              &times;
-            </button>
-          </section>
+          <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}
+                // onChange={this.search}
+              />
+              <button
+                className={styles.searchInputClose}
+                onClick={this.toggleSearch}
+              >
+                &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);
+    }
+}