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.
This commit is contained in:
Łukasz Mierzwa
2019-03-14 18:04:21 +00:00
parent da40e8a4b4
commit 4d138ddca7
4 changed files with 4 additions and 13 deletions
@@ -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;
@@ -7,7 +7,6 @@ import "./index.css";
const DropdownSlide = ({ children, duration, ...props }) => (
<CSSTransition
in={true}
classNames="components-animation-slide"
timeout={150}
appear={true}
@@ -7,7 +7,6 @@ import "./index.css";
const MountFade = ({ children, duration, ...props }) => (
<CSSTransition
in={true}
classNames="components-animation-fade"
timeout={150}
appear={true}
@@ -7,7 +7,6 @@ import "./index.scss";
const MountModal = ({ children, duration, ...props }) => (
<CSSTransition
in={true}
classNames="components-animation-modal"
timeout={200}
appear={true}