Add view-transition-class property by cssinate · Pull Request #37901 · mdn/content

cssinate · 2025-01-31T16:22:15Z

Description

Adding a page for the view-transition-class property.

Motivation

This property is supported in Chrome and Edge, but not documented in MDN yet.

Additional details

Spec is here: https://drafts.csswg.org/css-view-transitions-2/#view-transition-group-prop
IMPORTANT Browser compatibility and the link to the specification were generated properly, but the Formal Syntax was not found. I'm not sure how to fix that.

Fix #37231

github-actions · 2025-01-31T16:34:00Z

Preview URLs (9 pages)

Flaws (3)

Note! 6 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/View_Transition_API
Title: View Transition API
Flaw count: 1

macros:
- Macro produces link /en-US/docs/Web/API/View_Transitions_API/Using which is a redirect

URL: /en-US/docs/Web/API/View_Transition_API/Using
Title: Using the View Transition API
Flaw count: 1

macros:
- Macro produces link /en-US/docs/Web/API/View_Transitions_API/Using which is a redirect

URL: /en-US/docs/Web/CSS/CSS_view_transitions
Title: CSS view transitions
Flaw count: 1

macros:
- Can't resolve /en-US/docs/Web/API/CSSViewTransitionRule

External URLs (3)

URL: /en-US/docs/Web/API/View_Transition_API/Using
Title: Using the View Transition API

https://drafts.csswg.org/css-view-transitions-2/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/view-transition-class
Title: view-transition-class

https://developer.chrome.com/docs/web-platform/view-transitions/ (1 time) (Note! This may be a new URL 👀)
https://drafts.csswg.org/css-view-transitions-2/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2025-02-28 22:05:25)

estelle

Thanks for the PR. I added a few comments

files/en-us/web/api/view_transition_api/index.md

files/en-us/web/api/view_transition_api/using/index.md

files/en-us/web/css/_doublecolon_view-transition-new/index.md

files/en-us/web/css/_doublecolon_view-transition-old/index.md

files/en-us/web/css/css_view_transitions/index.md

files/en-us/web/css/view-transition-class/index.md

cssinate · 2025-02-07T19:27:21Z

@estelle Thanks! I think I've fixed everything. Do you know what's happening with the Formal Definition and why it's not found? Is there something I can do to fix this?

estelle

thanks. I made some suggestions to the vt-group page to apply to the other pages.

The specificity info is at https://drafts.csswg.org/css-view-transitions-2/#pseudo-element-class-additions

files/en-us/web/css/_doublecolon_view-transition-group/index.md

files/en-us/web/api/view_transition_api/index.md

files/en-us/web/api/view_transition_api/using/index.md

files/en-us/web/css/_doublecolon_view-transition-group/index.md

files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md

files/en-us/web/css/_doublecolon_view-transition-new/index.md

files/en-us/web/css/view-transition-class/index.md

Josh-Cena · 2025-03-07T18:38:20Z

Hi @cssinate Do you plan to come back to this?

As for the formal definition, they are hosted in a separate data repo, so you don't have to worry about them, though you are definitely welcome to contribute to https://github.com/mdn/data

github-actions · 2025-03-10T16:44:06Z

This pull request has merge conflicts that must be resolved before it can be merged.

bsmth · 2025-04-11T15:57:01Z

It looks like this PR is at risk of going stale, does anyone wish to pick up where the author left off? @cssinate do you want to come back to this or should someone (@estelle probably?) else help get this over the line? Thank you :)

cssinate · 2025-04-11T16:13:15Z

My apologies. I didn't have the bandwidth last month to keep on this, but I'll handle this within the next few work days.

estelle

partial review. still need to review the new page (transition class)

files/en-us/web/api/view_transition_api/using/index.md

files/en-us/web/css/_doublecolon_view-transition-group/index.md

files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md

files/en-us/web/css/_doublecolon_view-transition-group/index.md

files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md

files/en-us/web/css/_doublecolon_view-transition-new/index.md

estelle

reviewed the guide

files/en-us/web/css/view-transition-class/index.md

estelle · 2025-04-24T23:35:52Z

files/en-us/web/css/view-transition-class/index.md

+```css
+::view-transition-group(.card) {
+  animation-duration: 3s;
+}
+
+.card {
+  view-transition-class: card;
+}
+
+.card#card1 {
+  view-transition-name: card1;
+}
+
+.card#card2 {
+  view-transition-name: card2;


This example likely works, but the reader will not know if the .card in the vtg parameter is the class of the element or the value of the vtc with a period in front of it. I suggest using two different class namet to make this clear.

Tried to improve in f850a86 if you can have a look

files/en-us/web/css/view-transition-class/index.md

estelle · 2025-05-20T01:02:21Z

Hi @cssinate. Please submit a re-review request by clicking on the icon next to my name in the reviewers list when you've had a chance to review the comments. thanks.

bsmth · 2025-05-21T09:41:01Z

Hi @cssinate. Please submit a re-review request by clicking on the icon next to my name in the reviewers list when you've had a chance to review the comments. thanks.

@estelle would you like to commit your suggestions to the branch already so we can merge the improvements? There's another PR in-flight (linked by Josh above) on the same topic for Fx release docs, so it would be good to avoid conflicts on it.

Any objections to that @cssinate?

Thanks!

cssinate · 2025-05-21T23:28:47Z

Yeah, I'm sorry this has been low-priority for me. I had more free time when I submitted the initial PR than I've had since then. If anyone has time to merge the suggestions (doesn't have to be Estelle) that would be awesome please and thank you.

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

files/en-us/web/css/_doublecolon_view-transition-group/index.md

files/en-us/web/css/view-transition-class/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

bsmth · 2025-05-23T09:54:03Z

Yeah, I'm sorry this has been low-priority for me. I had more free time when I submitted the initial PR than I've had since then. If anyone has time to merge the suggestions (doesn't have to be Estelle) that would be awesome please and thank you.

Thanks a lot. I've assigned myself to help get this over the finish line! Well done on all of your work, some small adjustments left as far as I can see, but hopefully we can merge soon.

files/en-us/web/api/view_transition_api/index.md

bsmth

+1 from me! Thank you! @estelle can you have a quick look?

files/en-us/web/css/view-transition-class/index.md

cssinate · 2025-05-26T03:01:03Z

I appreciate it Brian. Thank you. May 23, 2025 5:54:28 a.m. Brian Smith ***@***.***>:

…

[Image]*bsmth* left a comment (mdn/content#37901)[#37901 (comment)] Yeah, I'm sorry this has been low-priority for me. I had more free time when I submitted the initial PR than I've had since then. If /anyone/ has time to merge the suggestions (doesn't have to be Estelle) that would be awesome please and thank you. Thanks a lot. I've assigned myself to help get this over the finish line! Well done on all of your work, some small adjustments left as far as I can see, but hopefully we can merge soon. — Reply to this email directly, view it on GitHub[#37901 (comment)], or unsubscribe[https://github.com/notifications/unsubscribe-auth/AGAOZVG7MKU3NCGHSJFWZGL273V5FAVCNFSM6AAAAABWH52UO6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSMBTHEYDQMJVG4]. You are receiving this because you were mentioned. [Tracking image][https://github.com/notifications/beacon/AGAOZVANDMOHA2ZLZOI7FJT273V5FA5CNFSM6AAAAABWH52UO6WGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTVNCYPT2.gif]

bsmth · 2025-05-27T07:28:16Z

Thanks, all! Going to merge shortly

@estelle

* Add view-transition-class property * Address comments from @estelle * Fixing awkward wording * Add backticks to period * Remove KeyboardEvent.initKeyEvent page (mdn#39027) * Adding suggested changes * fix linting issues * Apply suggestions from code review Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore(css): Use parens for view transition pseudo names * Update files/en-us/web/api/view_transition_api/index.md * chore(css): ad param section * chore(css): try to make the view transition names more illustrative * Update files/en-us/web/css/view-transition-class/index.md --------- Co-authored-by: Paul Grant <paul.grant@hootsuite.com> Co-authored-by: Joshua Chen <sidachen2003@gmail.com> Co-authored-by: Estelle Weyl <estelle@weyl.org> Co-authored-by: Brian Smith <brian@smith.berlin> Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

cssinate requested review from a team as code owners January 31, 2025 16:22

cssinate requested review from estelle and sideshowbarker and removed request for a team January 31, 2025 16:22

github-actions bot added Content:CSS Cascading Style Sheets docs Content:WebAPI Web API docs size/m [PR only] 51-500 LoC changed labels Jan 31, 2025

sideshowbarker removed their request for review February 1, 2025 13:26

estelle reviewed Feb 7, 2025

View reviewed changes

cssinate force-pushed the add-view-transition-class branch 2 times, most recently from 95f79e5 to b91b186 Compare February 7, 2025 19:22

cssinate requested a review from estelle February 7, 2025 19:27

estelle reviewed Feb 7, 2025

View reviewed changes

Josh-Cena mentioned this pull request Mar 7, 2025

view-transition-class is well-implemented #38516

Closed

dbarabashh mentioned this pull request Mar 7, 2025

view-transition-class is well-implemented #37231

Closed

Josh-Cena linked an issue Mar 7, 2025 that may be closed by this pull request

view-transition-class is well-implemented #37231

Closed

estelle mentioned this pull request Mar 7, 2025

CSS view transitions: update feature status. #38519

Merged

github-actions bot added the merge conflicts 🚧 [PR only] label Mar 10, 2025

github-actions bot removed the merge conflicts 🚧 [PR only] label Mar 10, 2025

bsmth added the awaiting response Awaiting for author to address review/feedback label Apr 11, 2025

cssinate force-pushed the add-view-transition-class branch from e307b01 to 4620e42 Compare April 11, 2025 16:27

cssinate requested a review from a team as a code owner April 11, 2025 16:27

estelle reviewed Apr 24, 2025

View reviewed changes

Josh-Cena removed the awaiting response Awaiting for author to address review/feedback label Apr 24, 2025

Merge branch 'main' into add-view-transition-class

fbdca61

estelle reviewed Apr 24, 2025

View reviewed changes

Merge branch 'main' into add-view-transition-class

befd716

Josh-Cena mentioned this pull request May 21, 2025

feat(css): Update the view-transition-class page #39593

Closed

1 task

bsmth requested a review from estelle May 23, 2025 09:16

Apply suggestions from code review

51fe46f

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

github-actions bot reviewed May 23, 2025

View reviewed changes

files/en-us/web/css/_doublecolon_view-transition-group/index.md Outdated Show resolved Hide resolved

files/en-us/web/css/view-transition-class/index.md Outdated Show resolved Hide resolved

bsmth and others added 2 commits May 23, 2025 11:21

Apply suggestions from code review

220f478

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Merge branch 'main' into add-view-transition-class

a8b1559

bsmth self-assigned this May 23, 2025

bsmth reviewed May 23, 2025

View reviewed changes

files/en-us/web/api/view_transition_api/index.md Outdated Show resolved Hide resolved

bsmth added 4 commits May 23, 2025 12:28

chore(css): Use parens for view transition pseudo names

51a5576

Update files/en-us/web/api/view_transition_api/index.md

d185c71

chore(css): ad param section

a8c7481

chore(css): try to make the view transition names more illustrative

f850a86

bsmth approved these changes May 23, 2025

View reviewed changes

bsmth reviewed May 23, 2025

View reviewed changes

files/en-us/web/css/view-transition-class/index.md Outdated Show resolved Hide resolved

Update files/en-us/web/css/view-transition-class/index.md

d397111

Merge branch 'main' into add-view-transition-class

74470b2

bsmth merged commit 5de3378 into mdn:main May 27, 2025
8 checks passed

bsmth mentioned this pull request May 27, 2025

[CSS] Enable View Transitions on Nightly #39305

Closed

8 tasks

Conversation

cssinate commented Jan 31, 2025 • edited by Josh-Cena Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation

Additional details

Uh oh!

github-actions bot commented Jan 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

estelle left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cssinate commented Feb 7, 2025

Uh oh!

estelle left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Josh-Cena commented Mar 7, 2025

Uh oh!

github-actions bot commented Mar 10, 2025

Uh oh!

bsmth commented Apr 11, 2025

Uh oh!

cssinate commented Apr 11, 2025

Uh oh!

estelle left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

estelle left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

estelle Apr 24, 2025

Choose a reason for hiding this comment

Uh oh!

bsmth May 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

estelle commented May 20, 2025

Uh oh!

bsmth commented May 21, 2025

Uh oh!

cssinate commented May 21, 2025

Uh oh!

Uh oh!

Uh oh!

bsmth commented May 23, 2025

Uh oh!

Uh oh!

bsmth left a comment

Choose a reason for hiding this comment

Uh oh!

cssinate commented Jan 31, 2025 •

edited by Josh-Cena

Loading

github-actions bot commented Jan 31, 2025 •

edited

Loading