Move all transition animation code into CSS and only toggle classes or values. The animation of the surrounding Wikipedia Skin elements (currently encoded classes implementing the "SkinAdjuster" interface), needs to be in sync with the animation of the banners, to avoid overlaps.
This might also include looking into T321384: Come up with a way to control the easing on the banner skin adjusters
Acceptance Criteria
- The banners animate in with CSS classes
- We have an example banner that slides in using CSS only.
- The SkinAdjuster is refactored to provide TypeScript interfaces.
Implementation details
- Pass the transition state to child elements (in the <slot>).
- Use fixed values for transition times, to be able to have a set of classes that encode that transition time.
- Use timeouts instead of transition events to manage state changes (that get passed to children).