Animations

Better Dialog supports animations for opening and closing modals via a simple, plugin-like API.
You can choose between built-in helpers or write your own.

This page covers the built-in fade()Animation and css()Animation animation utilities.

---

Using fadeAnimation()

The fadeAnimation() animation uses the Web Animations API to smoothly fade the modal and its backdrop in and out.

Example

import { BetterDialog } from '@haebaragi/better-dialog';
import { fadeAnimation } from '@haebaragi/better-dialog/animations';

new BetterDialog('#my-dialog', {
  animation: fadeAnimation({ duration: 300 }),
});

What it does

• Fades in the <dialog> element from opacity: 0 to opacity: 1
• Animates the ::backdrop pseudo-element as well
• Works in modern browsers that support Element.animate()

---

Using cssAnimation()

If you prefer to define your own animations in CSS, use the cssAnimation() helper.
This simply adds and removes CSS classes for “show” and “close” transitions.

Example

import { BetterDialog } from '@haebaragi/better-dialog';
import { cssAnimation } from '@haebaragi/better-dialog/animations';

new BetterDialog('#my-dialog', {
  animation: cssAnimation({
    duration: 300,
    showClass: 'fade-in',
    closeClass: 'fade-out',
  }),
});

Sample CSS

.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

---

Writing Custom Animations

You can also create your own animation function if needed.
See the API Reference for how to implement a custom AnimFunction.