From 4d138ddca78bc2ea03ca6f613774424547dd7ffe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 14 Mar 2019 15:17:38 +0000
Subject: [PATCH] fix(ui): tweak animations

Cleanup props by removing 'in' which is passed in from parent.
Set dropdown max-height to be biggish, so that the dropdown doesn't need to expand more after animation is complete.
Drop margin, padding and border overrides so transitions can't alter the size of the dropdown.
---
 .../Components/Animations/DropdownSlide/index.css  | 14 ++++----------
 .../Components/Animations/DropdownSlide/index.js   |  1 -
 ui/src/Components/Animations/MountFade/index.js    |  1 -
 ui/src/Components/Animations/MountModal/index.js   |  1 -
 4 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/ui/src/Components/Animations/DropdownSlide/index.css b/ui/src/Components/Animations/DropdownSlide/index.css
index 14180e18f..26c42a5d7 100644
--- a/ui/src/Components/Animations/DropdownSlide/index.css
+++ b/ui/src/Components/Animations/DropdownSlide/index.css
@@ -1,15 +1,12 @@
 .components-animation-slide-enter,
 .components-animation-slide-appear {
-  opacity: 0.01;
+  opacity: 0.25;
   overflow: hidden;
   max-height: 0px;
-  border: 0;
-  padding: 0;
-  margin: 0;
 }
 .components-animation-slide-enter-active,
 .components-animation-slide-appear-active {
-  max-height: 500px; /* can't use auto here */
+  max-height: 2000px; /* can't use auto here */
   opacity: 1;
   transition-property: max-height, opacity;
   transition-duration: 0.15s;
@@ -17,16 +14,13 @@
 }
 
 .components-animation-slide-exit {
-  max-height: 500px; /* can't use auto here */
+  max-height: 2000px; /* can't use auto here */
   opacity: 1;
 }
 .components-animation-slide-exit-active {
-  opacity: 0.01;
+  opacity: 0.25;
   overflow: hidden;
   max-height: 0px;
-  border: 0;
-  padding: 0;
-  margin: 0;
   transition-property: max-height, opacity;
   transition-duration: 0.15s;
   transition-timing-function: ease-out;
diff --git a/ui/src/Components/Animations/DropdownSlide/index.js b/ui/src/Components/Animations/DropdownSlide/index.js
index 549b849af..5275644c0 100644
--- a/ui/src/Components/Animations/DropdownSlide/index.js
+++ b/ui/src/Components/Animations/DropdownSlide/index.js
@@ -7,7 +7,6 @@ import "./index.css";
 
 const DropdownSlide = ({ children, duration, ...props }) => (
   <CSSTransition
-    in={true}
     classNames="components-animation-slide"
     timeout={150}
     appear={true}
diff --git a/ui/src/Components/Animations/MountFade/index.js b/ui/src/Components/Animations/MountFade/index.js
index 7e46b21c6..c63c9049a 100644
--- a/ui/src/Components/Animations/MountFade/index.js
+++ b/ui/src/Components/Animations/MountFade/index.js
@@ -7,7 +7,6 @@ import "./index.css";
 
 const MountFade = ({ children, duration, ...props }) => (
   <CSSTransition
-    in={true}
     classNames="components-animation-fade"
     timeout={150}
     appear={true}
diff --git a/ui/src/Components/Animations/MountModal/index.js b/ui/src/Components/Animations/MountModal/index.js
index c4b2446fb..70ec37ec3 100644
--- a/ui/src/Components/Animations/MountModal/index.js
+++ b/ui/src/Components/Animations/MountModal/index.js
@@ -7,7 +7,6 @@ import "./index.scss";
 
 const MountModal = ({ children, duration, ...props }) => (
   <CSSTransition
-    in={true}
     classNames="components-animation-modal"
     timeout={200}
     appear={true}