rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Toasts verschwinden jetzt (doppeltes ease + Fallback-Timeout)

Browse source 
CSS: var(--transition-normal) enthielt bereits 'ease', dadurch
'toast-out 200ms ease ease' = ungueltig, animationend feuert nie.
JS: setTimeout-Fallback nach 300ms als Sicherheitsnetz.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
rene 2026-04-12 18:27:30 +02:00
parent c37befd82b
commit 5a0be0e886
2 changed files with 4 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
backend/static/css/components.css
View file

@ -409,7 +409,7 @@ textarea.form-control {
font-size: var(--text-sm); font-size: var(--text-sm);
font-weight: var(--weight-medium); font-weight: var(--weight-medium);
pointer-events: auto; pointer-events: auto;
animation: toast-in var(--transition-normal) ease forwards; animation: toast-in 200ms ease forwards;
} }
.toast-success { background: var(--c-success); } .toast-success { background: var(--c-success); }
@ -425,7 +425,7 @@ textarea.form-control {
from { opacity: 1; transform: translateY(0) scale(1); } from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 0; transform: translateY(-8px) scale(0.96); }
} }
.toast.removing { animation: toast-out var(--transition-normal) ease forwards; } .toast.removing { animation: toast-out 200ms ease forwards; }
/* ------------------------------------------------------------ /* ------------------------------------------------------------
8. MODAL 8. MODAL

3
backend/static/js/ui.js
View file

@ -29,7 +29,8 @@ const UI = (() => {
function remove(el) { function remove(el) {
el.classList.add('removing'); el.classList.add('removing');
el.addEventListener('animationend', () => el.remove(), { once: true }); const fallback = setTimeout(() => el.remove(), 300);
el.addEventListener('animationend', () => { clearTimeout(fallback); el.remove(); }, { once: true });
} }
return { return {