Bug: ViewTransition name prop does not support numerical prefixes

[roarosa]

ViewTransition does not animate if a name prop starting with a number is provided. Presumably this is because the name is being used as a CSS class, but that is not obvious from the documentation.

React version: experimental

Steps To Reproduce

1. Create a ViewTransition with the name "1name" that wraps an element
2. Insert or remove the ViewTransition

Link to code example: https://codesandbox.io/p/sandbox/hopeful-dawn-cfgv64

The current behavior

Animation does not fire and no errors or warnings present

The expected behavior

One of the following:

1. The ViewTransition applies (e.g. by escaping the name)
2. An warning is logged for invalid ViewTransition name
3. The React docs are updated to call out that name must be a valid CSS name

[aakashkumar001]

hey, @roarosa can i fix this issue!

[valtism]

Oh, I was playing around with view transitions and could not work out why roughly half the time my components (named by UUID) were not animating. Turns out it's not quite half the time, but more precisely 10 times out of 16!

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[valtism]

This is still an issue

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!