v145 · Web APIs · Cancel-aware Toast

Cancel-aware toast

A toast queue that listens for onanimationcancel so it can detect interruptions — replaced toasts, removed nodes, conflicting display: none — and log the analytics event the user would otherwise never see.

queue

event log

code

// Chrome 145: onanimationcancel is now on the global event-handler IDL,
// so you can attach it as a property or via addEventListener on any
// element, document, or window.

toast.onanimationcancel = (e) => {
  // Triggered when the animation never reached its natural end —
  // e.g. parent display: none, element removed, animation-name unset,
  // or replaced by another keyframe set.
  analytics.send('toast_cancelled', { id: toast.dataset.id, elapsed: e.elapsedTime });
};

see also