flowbite
flowbite copied to clipboard
`Dismiss` duration doesn't apply to transition.
Describe the bug
When I set up a Dismiss object with the following options:
<div id="dismissMe">
<p> Dismiss me! </p>
<span id="dismissTrigger"> [X] </span>
</div>
<script>
let dismiss = new Dismiss(document.querySelector("#dismissMe"), null, { duration: 10000 });
document.querySelector("#dismissTrigger").addEventListener("click", (e) => { dismiss.hide() });
</script>
I expect that when clicking "[X]" the dismiss transition (default "transition-opacity") to follow the duration, the #dismissMe element opacity should slowly disappear, taking 10s to change from 1 to 0.
To Reproduce Steps to reproduce the behavior:
- Set up a Dismiss with the
durationoption set to10000 - Trigger the
.hide()function - Note that the
transition-opacityfor the target element goes from1to0fast (assuming 300ms) - Note that the target element block space is still present on the page for the remaining
duration. - After 10s (the
durationoption) the element is removed from the page, the block space previously occupied by the target element is removed.
Expected behavior
I expect the transition to follow the duration option, the element opacity should slowly decrease in the 10s duration as set in the example.
Desktop (please complete the following information):
- OS: macOS
- Browser: Chrome
- Version: 126
I assume the duration option must be one of the presets defined by Tailwind? If that's the case the documentation leaves much to be desired. I can submit a PR to add this note if that's the case.
However, even if I try to generate a custom duration in tailwind.config.js it doesn't work:
module.exports = {
// ...
theme: {
extend: {
transitionDuration: {
'10000': '10s', // or '10000ms'
}
}
}
}
I would like to be able to set custom durations and having them be applied regardless of Tailwind. Does that make sense?