[css-view-transitions-2] Automatically start view transitions for `<dialog>`, Popover, etc.
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
This possibility was raised in https://github.com/whatwg/html/issues/7785#issuecomment-1316821685. The idea is that perhaps a ViewTransition could be automatically started, with appropriate modifications to existing algorithms, for <dialog>, Popover, and perhaps even any element moving to/from display:none.
Option 1: content attribute
One option would be to add a content attribute that confers this behavior:
<dialog autostartatransition>
When shown/closed, a View Transition will start
</dialog>
When that attribute is present, existing algorithms such as showModal() would be modified to 1) start a ViewTransition, then 2) run existing steps for the algorithm that show/hide the element.
The content attribute approach would seem to work for most element types, including perhaps even when <div autostartatransition> becomes <div style="display:none" autostartatransition>. All of these would require thought about how to incorporate this behavior into all of the relevant spec algorithms.
Option 2: individual APIs
Another alternative would be to modify existing APIs:
myDialog.show({autostartatransition: true});
myDialog.showModal({autostartatransition: true});
myDialog.close({autostartatransition: true});
myPopover.showPopover({autostartatransition: true});
myPopover.hidePopover({autostartatransition: true});
I'm not sure how that would look for the plain <div style="display:none"> example.
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
Start with the linked WHATWG HTML discussion, then read the existing showModal(), dialog show/close, and popover show/hide algorithms referenced in the issue. Define whether automatic transitions should use a content attribute or API options, and document the required algorithm changes for the selected approach.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100