themesberg / themesberg/flowbite
`Dismiss` duration doesn't apply to transition.
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 9.4k
- Forks
- 862
- PR merge metrics
- No merged PRs in 30d
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the provided HTML and JavaScript example with Dismiss({ duration: 10000 }) and trigger hide(). Start by tracing the Dismiss hide() behavior alongside the transition-opacity class. Done means opacity changes over the configured duration while the element is removed only after that duration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, tailwindcss
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100