From 6d53669300d50f9b89568f83311451b5e32784cb Mon Sep 17 00:00:00 2001
From: Felix Eckhofer <felix@eckhofer.com>
Date: Sun, 22 Dec 2024 10:23:19 +0100
Subject: [PATCH] Clean up animation of mobile menu when navigating to a new
page
Only on mobile FF apparently, maybe some side effect of turbo morph?
---
app/javascript/controllers/navigation_controller.js | 11 ++++++++---
1 file changed, 8 insertions(+), 3 deletions(-)
diff --git a/app/javascript/controllers/navigation_controller.js b/app/javascript/controllers/navigation_controller.js
index 7a1fc41..4691137 100644
--- a/app/javascript/controllers/navigation_controller.js
+++ b/app/javascript/controllers/navigation_controller.js
@@ -1,5 +1,11 @@
import { Controller } from "@hotwired/stimulus"
+function delayAfterAnimate(fn) {
+ setTimeout(() => { fn(); },
+ window.matchMedia("(prefers-reduced-motion: reduce)").matches ?
+ 0 : 300); // Should match the duration in tailwind.config.js
+}
+
export default class extends Controller {
static targets = [ "mobileMenu" ];
@@ -9,12 +15,11 @@ export default class extends Controller {
menu.classList.remove('hidden');
menu.classList.remove('motion-safe:animate-slideOut');
menu.classList.add('motion-safe:animate-slideIn');
+ delayAfterAnimate(() => {menu.classList.remove('motion-safe:animate-slideIn');}); // helps with some jank on page reload on mobile FF
} else {
menu.classList.remove('motion-safe:animate-slideIn');
menu.classList.add('motion-safe:animate-slideOut');
- setTimeout(() => { menu.classList.add('hidden'); },
- window.matchMedia("(prefers-reduced-motion: reduce)").matches ?
- 0 : 300); // Should match the duration in tailwind.config.js
+ delayAfterAnimate(() => {menu.classList.add('hidden');})
}
}
}
--
GitLab