diff --git a/ui/src/Components/Animations/DropdownSlide/index.css b/ui/src/Components/Animations/DropdownSlide/index.css index 26c42a5d7..7a9c64032 100644 --- a/ui/src/Components/Animations/DropdownSlide/index.css +++ b/ui/src/Components/Animations/DropdownSlide/index.css @@ -1,3 +1,8 @@ +.components-animation-slide { + will-change: opacity, height; + transform: translateZ(0); +} + .components-animation-slide-enter, .components-animation-slide-appear { opacity: 0.25; diff --git a/ui/src/Components/Animations/MountFade/index.css b/ui/src/Components/Animations/MountFade/index.css index ae5a758ab..079c6c290 100644 --- a/ui/src/Components/Animations/MountFade/index.css +++ b/ui/src/Components/Animations/MountFade/index.css @@ -1,7 +1,12 @@ +.components-animation-fade { + will-change: opacity; + transform: translateZ(0); +} + .components-animation-fade-appear { opacity: 0.01; } .components-animation-fade-appear-active { opacity: 1; - transition: all 0.3s ease-in; + transition: opacity 0.3s ease-in; } diff --git a/ui/src/Components/Animations/MountModal/index.scss b/ui/src/Components/Animations/MountModal/index.scss index fa9c40525..1187115b3 100644 --- a/ui/src/Components/Animations/MountModal/index.scss +++ b/ui/src/Components/Animations/MountModal/index.scss @@ -3,6 +3,11 @@ $duration: 0.2s; +.components-animation-modal { + will-change: opacity, transform; + transform: translateZ(0); +} + .components-animation-modal-appear, .components-animation-modal-enter { opacity: 0.01; diff --git a/ui/src/Components/Animations/NavBarSlide/index.css b/ui/src/Components/Animations/NavBarSlide/index.css index 3f97215e9..36173329f 100644 --- a/ui/src/Components/Animations/NavBarSlide/index.css +++ b/ui/src/Components/Animations/NavBarSlide/index.css @@ -1,3 +1,8 @@ +.components-animation-navbar { + will-change: opacity; + transform: translateZ(0); +} + .components-animation-navbar-appear, .components-animation-navbar-enter { opacity: 0.01; diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js index f7f425d7b..e952ec5ca 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js @@ -195,8 +195,11 @@ const AlertGroup = observer( } return ( -
- + +
) : null}
- -
+
+ ); } } diff --git a/ui/src/Components/Grid/AlertGrid/index.css b/ui/src/Components/Grid/AlertGrid/index.css index 3f4667fad..756dd044b 100644 --- a/ui/src/Components/Grid/AlertGrid/index.css +++ b/ui/src/Components/Grid/AlertGrid/index.css @@ -1,5 +1,8 @@ -.components-grid-alertgrid-alertgroup { - transition-property: top, left; - transition-duration: 0.3s; +.components-grid-alertgrid-alertgroup.components-animation-fade-appear-done { + will-change: transform; + transform: translateZ(0); + + transition-property: transform; + transition-duration: 0.4s; transition-timing-function: ease; } diff --git a/ui/src/Components/Grid/AlertGrid/index.js b/ui/src/Components/Grid/AlertGrid/index.js index 8cb15912d..0c1a6ab3a 100644 --- a/ui/src/Components/Grid/AlertGrid/index.js +++ b/ui/src/Components/Grid/AlertGrid/index.js @@ -215,6 +215,7 @@ const AlertGrid = observer(