diff --git a/src/js/bookmark-import.js b/src/js/bookmark-import.js index 541e7f1..dcaa56c 100644 --- a/src/js/bookmark-import.js +++ b/src/js/bookmark-import.js @@ -4,6 +4,20 @@ via chrome.bookmarks.getTree() / browser.bookmarks.getTree() ============================================= */ +/** + * Fuehrt eine DOM-Mutation mit nativem View-Transition-Fade aus. + * Feature-Detection-Fallback (Firefox < 144): instant. + * reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. + * @param {Function} mutate - synchrone DOM-Mutation + */ +function bmImportViewTransition(mutate) { + if (document.startViewTransition) { + document.startViewTransition(mutate); + } else { + mutate(); + } +} + const BrowserBookmarkImport = { /** Initialisiert den Import-Button */ @@ -196,16 +210,18 @@ const BrowserBookmarkImport = { overlay.appendChild(modal); document.body.appendChild(overlay); - // Animation - requestAnimationFrame(() => overlay.classList.add('active')); + // View-Transition-Fade + bmImportViewTransition(() => overlay.classList.add('active')); }, /** Schliesst das Modal */ _closeModal() { const overlay = document.getElementById('bmImportOverlay'); if (!overlay) return; - overlay.classList.remove('active'); - setTimeout(() => overlay.remove(), 250); + bmImportViewTransition(() => { + overlay.classList.remove('active'); + overlay.remove(); + }); }, /**