style: add animation to the lookup component (#1767)

* style: add animation to the lookup component * fix: indentation Co-authored-by: TahimiLeonBravo <tahimi@nexxtway.com> Co-authored-by: Tahimi <tahimileon@gmail.com>
nexxtway · Jul 29, 2020 · 452cc53 · 452cc53
1 parent dfa40a6
commit 452cc53
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/src/components/Lookup/styled/optionsMenu.js b/src/components/Lookup/styled/optionsMenu.js
@@ -1,6 +1,16 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 
+const ListOptionsMenu = keyframes`
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+`;
+
 const StyledOptionsMenu = attachThemeAttrs(styled.div)`
     position: absolute;
     width: 100%;
@@ -11,7 +21,8 @@ const StyledOptionsMenu = attachThemeAttrs(styled.div)`
     overflow: hidden;
     margin-top: 0.2rem;
     z-index: 2000;
-    transition: all 0.1s linear;
+    animation: ${ListOptionsMenu};
+    animation-duration: 0.3s
     padding: 1.15rem 0;
 `;