From 655bfded0f7cebb085d7c0feffc661429e64864d Mon Sep 17 00:00:00 2001 From: Marco Ambrosini Date: Thu, 16 May 2024 16:32:16 +0200 Subject: [PATCH] Improve sidebars animations Signed-off-by: Marco Ambrosini --- src/components/NcAppNavigation/NcAppNavigation.vue | 5 ++++- src/components/NcAppSidebar/NcAppSidebar.vue | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue index 3bfe5f83e7..40e5b9f3f9 100644 --- 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 index d111817e43..49c5d4e4c3 100644 --- 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,