The right way to animate the exit of modals and other components

[ivanburlakov]

I wanted to make modal animations similar to what we see in Headless UI website examples. I was able to achieve it with following overridind CSS. My two questions are:

1. Is this the right way to do it? Didn't I break accessibility and performance?
2. In the other discussion I heard that Daisy UI can be used with Headless UI. But what are the benefits of that, if with Daisy UI you can basically achieve the same goals?

Thank you for your work!

CSS:

.modal {
  @apply visible ease-in duration-200 bg-opacity-25;
}

.modal-box {
  @apply ease-in duration-200;
  @apply scale-95;
}

.modal-open .modal-box,
.modal-toggle:checked + .modal .modal-box,
.modal:target .modal-box {
  @apply ease-out duration-300;
}

[ivanburlakov]

Oh, and a bit offtopic update: just realised that my scale overriding does not do anything 🤨 Why?