[Web LA] Add EntryExitTransition

[m-bert]

Summary

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

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

Two animations

First approach was to run 2 animations - exiting and entering. While it seemed like an easier approach, there were few problems:

• It lead to many code duplications (especially when starting animation, handling end/cancel)
• I couldn't find a way to keep elements in good positions (transform was overriden by animations and we need to use it to put element back in its starting position)

While I haven't observed any flickers caused by having 2 animations, arguments above made me try seconds approach)

Dynamic keyframe

Second approach to this problem involves creating dynamic keyframe animation - just like in case of other transitions. First we obtain data of both exiting and entering animations. Then we perform two operations:

1. We add calculated transform into exiting animation (unshift is used to make sure that it will be placed at the beginning of keyframe timestamps
2. We merge two animations object into one keyframe data object.

In 2. we have to make sure that both animations will fit in one keyframe, therefore exiting animation is squeezed into interval [0,49] and entering animation runs from 50 to 100.

Examples

Nagranie.z.ekranu.2024-07-8.o.14.28.38.mov

Nagranie.z.ekranu.2024-07-8.o.14.42.40.mov

Test plan

Verified on DefaultLayoutTransitions example.