diff --git a/app/javascript/controllers/navigation_controller.js b/app/javascript/controllers/navigation_controller.js index 7a1fc4144497f21c2273a7dffdbfa99e128ce9a1..4691137e2f9712bad79ad15b2d7be29fd7d17ce1 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');}) } } }