[#45794] - [6.0] Atum - add nice transition to open/close details
- Ready to Commit
- Medium
- Build: 6.0-dev
- # 45794
- Diff
- hans2103:6.0-Atum-details-summary
User tests: Successful: Unsuccessful:
Pull Request for no issue.
Summary of Changes
This PR containing a CSS change add a nice open/close transition on the <details> element.
It will work in Chrome and Edge. It will not work (yet) in Safari nor Firefox and will neglect this feature.
https://nerdy.dev/open-and-close-transitions-for-the-details-element
Testing Instructions
-
Joomla Administrator > System > Global Configuration > Tab = Text Filters
-
Open and close one or all four items with a triangle before
-
Watch the transition of opening and closing
-
Apply PR
-
run
npm run build:css -
Repeat opening and closing
-
Watch the difference
Actual result BEFORE applying this Pull Request
Screen.Recording.2025-07-27.at.15.59.30.mov
Expected result AFTER applying this Pull Request
A nice transition is visible in both Crome and Edge browser
Firefox and Safari will remain as shown in "BEFORE" state and will use the nice transition once they implemented https://caniuse.com/?search=interpolate-size%3A%20allow-keywords
Screen.Recording.2025-07-27.at.15.59.02.mov
Link to documentations
Please select:
-
Documentation link for docs.joomla.org:
-
No documentation changes for docs.joomla.org needed
-
Pull Request link for manual.joomla.org:
-
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Repository NPM Change |
There is a jerky motion when the details is collapsed. I set the duration to 1.2s so it can be easily seen in this video
chrome_16j1mstTDx.mp4
@brianteeman I see the jerky motion and will dive into it trying to solve it.
update:
caused by:
| Labels |
Added:
NPM Resource Changed
PR-6.0-dev
|
||
@brianteeman solved issue by replacing margin-top by padding-top.
I have tested this item ✅ successfully on 7b78a57
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45794.
jerky motion is now resolved - thanks
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45794.
I have tested this item ✅ successfully on 7b78a57
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45794.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45794.
| Labels |
Added:
RTC
|
||
Merge of this PR has to wait until PR #45784 has been merged
stylelint needs to be updated first