github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-05 03:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): tweak animations

Browse Source 
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 15:17:38 +00:00
parent da40e8a4b4
commit 4d138ddca7
4 changed files with 4 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
ui/src/Components/Animations/DropdownSlide/index.css
View File

@@ -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;

1
ui/src/Components/Animations/DropdownSlide/index.js
View File

@@ -7,7 +7,6 @@ import "./index.css";
const DropdownSlide = ({ children, duration, ...props }) => (
<CSSTransition
in={true}
classNames="components-animation-slide"
timeout={150}
appear={true}

1
ui/src/Components/Animations/MountFade/index.js
View File

@@ -7,7 +7,6 @@ import "./index.css";
const MountFade = ({ children, duration, ...props }) => (
<CSSTransition
in={true}
classNames="components-animation-fade"
timeout={150}
appear={true}

1
ui/src/Components/Animations/MountModal/index.js
View File

@@ -7,7 +7,6 @@ import "./index.scss";
const MountModal = ({ children, duration, ...props }) => (
<CSSTransition
in={true}
classNames="components-animation-modal"
timeout={200}
appear={true}