From fdd787d49cd903fcfe2f70c169dc3e10b5126bbb Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sat, 1 Jul 2017 17:16:18 -0700
Subject: [PATCH] Added transitions for search

---
 frontend/scenes/Search/Search.js | 35 +++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/frontend/scenes/Search/Search.js b/frontend/scenes/Search/Search.js
index 34c35b22e..4ec9cc78d 100644
--- a/frontend/scenes/Search/Search.js
+++ b/frontend/scenes/Search/Search.js
@@ -28,12 +28,17 @@ const Container = styled(CenteredContent)`
 
 const ResultsWrapper = styled(Flex)`
   position: absolute;
-  transition: all 200ms ease-in-out;
+  transition: all 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
   top: ${props => (props.pinToTop ? '0%' : '50%')};
   margin-top: ${props => (props.pinToTop ? '40px' : '-75px')};
   width: 100%;
 `;
 
+const ResultList = styled(Flex)`
+  opacity: ${props => (props.visible ? '1' : '0')};
+  transition: all 400ms cubic-bezier(0.65, 0.05, 0.36, 1);
+`;
+
 @observer class Search extends React.Component {
   firstDocument: HTMLElement;
   props: Props;
@@ -100,19 +105,21 @@ const ResultsWrapper = styled(Flex)`
             onChange={this.updateQuery}
             value={query || ''}
           />
-          <ArrowKeyNavigation
-            mode={ArrowKeyNavigation.mode.VERTICAL}
-            defaultActiveChildIndex={0}
-          >
-            {this.store.documents.map((document, index) => (
-              <DocumentPreview
-                innerRef={ref => index === 0 && this.setFirstDocumentRef(ref)}
-                key={document.id}
-                document={document}
-                highlight={this.store.searchTerm}
-              />
-            ))}
-          </ArrowKeyNavigation>
+          <ResultList visible={hasResults}>
+            <ArrowKeyNavigation
+              mode={ArrowKeyNavigation.mode.VERTICAL}
+              defaultActiveChildIndex={0}
+            >
+              {this.store.documents.map((document, index) => (
+                <DocumentPreview
+                  innerRef={ref => index === 0 && this.setFirstDocumentRef(ref)}
+                  key={document.id}
+                  document={document}
+                  highlight={this.store.searchTerm}
+                />
+              ))}
+            </ArrowKeyNavigation>
+          </ResultList>
         </ResultsWrapper>
       </Container>
     );