[Web LA] Add CurvedTransition

[m-bert]

Summary

This PR adds CurvedTransition to set of transitions available on web.

This transition is different from others, therefore logic behind its creation is also different.

Logic

Logic behind this transition is a bit complicated since CSS does not allow to specify different easings to different properties.

In order to achieve desired effect, we have to use second component. One of them will run animation along Y axis and the other one along X axis. This will result in child component being animated with combined easings.

Current logic works as follows:

1. Clone element with layout transition
2. Reset all of dummy styles, so that it is placed exactly at elements position
3. Hide all of elements children and set element background color to transparent
4. Add dummy as element child
5. Start animations for both element and dummy
6. After animation ends, remove dummy from children of element
7. Show all children of element and bring back old background color

Examples

Nagranie.z.ekranu.2024-07-9.o.14.55.12.mov

Nagranie.z.ekranu.2024-07-9.o.14.54.21.mov

Limitations

Currently CurvedTransition is not applied to width/height. Also I'm not yet sure how it interacts with background images.

Test plan

Verified on DefaultLayoutTransitions example (with easingX changed to sin and easingY to exp).

[piaskowyk]

You can try a bit different approach like here - https://tobiasahlin.com/blog/curved-path-animations-in-css/

[m-bert]

Main problem with using ::after is that we cannot add children to it, therefore we would either have to hide them, or leave them animate along one axis, which I believe is unacceptable.

Current approach does almost the same thing, but clones element rather than using ::after (which also adds this pseudoelement as elements' child). Moreover, it takes advantage of already existing custom animations mechanism (i.e. adding them and clearing).

I think we can stick to current approach, but I'm open to discussion.