Improve sidebars animations

Signed-off-by: Marco Ambrosini <marcoambrosini@proton.me>
nextcloud-libraries · May 20, 2024 · 655bfde · 655bfde
1 parent 532a257
commit 655bfde
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -234,7 +234,10 @@ export default {
 	// Set scoped variable override
 	// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up
 	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));
-	transition: transform var(--animation-quick), margin var(--animation-quick);
+	transition: transform var(--animation-slow) cubic-bezier(.34,.11,0,1.2), margin var(--animation-slow) cubic-bezier(.34,.11,0,1.2);
+	@media (prefers-reduced-motion){
+		transition: transform var(--animation-slow), margin var(--animation-slow);
+	}
 	width: $navigation-width;
 	// Left toggle button padding + toggle button + right padding from NcAppContent
 	--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));

diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -1406,6 +1406,7 @@ $top-buttons-spacing: 6px;
 .slide-right-enter-active {
 	transition-duration: var(--animation-quick);
 	transition-property: margin-right;
+	transition-timing-function: cubic-bezier(0,.11,1,1.2);
 }
 
 .slide-right-enter-to,