From 4136a5f04b00e63306d8dad439fd266a54bd9719 Mon Sep 17 00:00:00 2001
From: sasha <sanusart@gmail.com>
Date: Tue, 3 Mar 2020 22:47:25 +0200
Subject: [PATCH] DOCS (examples): fix animation example

---
 docs/src/examples/WithAnimation.js | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/docs/src/examples/WithAnimation.js b/docs/src/examples/WithAnimation.js
index 1c8b5fc9..e44f3684 100644
--- a/docs/src/examples/WithAnimation.js
+++ b/docs/src/examples/WithAnimation.js
@@ -22,7 +22,7 @@ const WithAnimation = ({ options, title }) => {
         isOpen={open}
         onDropdownCloseRequest={({ close }) => {
           setOpen(true);
-          sleep(298).then(() => {
+          sleep(300).then(() => {
             close();
             setOpen(false);
           });
@@ -37,42 +37,46 @@ const WithAnimation = ({ options, title }) => {
 
 const hide = keyframes`
   from {
-    transition: height 298ms ease;
-    overflow: hidden;
+    transition: height 310ms ease;
   }
 
   to {
-    transition: height 298ms ease;
+    transition: height 310ms ease;
     height: 0;
-    overflow: hidden;
+    opacity: 0;
   }
 `;
 
 const show = keyframes`
   from {
-    transition: height 298ms ease;
+    transition: height 310ms ease;
     height: 0;
-    overflow: hidden;
+    opacity: 0;
   }
 
   to {
-    transition: height 298ms ease;
-    overflow: hidden;
+    transition: height 310ms ease;
   }
 `;
 
 const StyledSelect = styled(Select)`
+  transition: all 0.3s ease-out;
+
   .react-dropdown-select-dropdown {
-    height: 300px;
+    height: 310px;
     ${({ isOpen }) =>
       isOpen
         ? css`
-            animation: ${hide} 298ms ease-in-out;
+            animation: ${hide} 310ms ease-in-out;
           `
         : css`
-            animation: ${show} 298ms ease-in-out;
+            animation: ${show} 310ms ease-in-out;
           `};
   }
+
+  .react-dropdown-select-option {
+    transition: all 0.3s ease-out;
+  }
 `;
 
 WithAnimation.propTypes = {};