Added transitions for search

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,6 +105,7 @@ const ResultsWrapper = styled(Flex)`
             onChange={this.updateQuery}
             value={query || ''}
           />
+          <ResultList visible={hasResults}>
             <ArrowKeyNavigation
               mode={ArrowKeyNavigation.mode.VERTICAL}
               defaultActiveChildIndex={0}
@@ -113,6 +119,7 @@ const ResultsWrapper = styled(Flex)`
                 />
               ))}
             </ArrowKeyNavigation>
+          </ResultList>
         </ResultsWrapper>
       </Container>
     );