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

 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');})
     }
   }
 }