Page MenuHomePhabricator

Implement CSS-only banner transitions
Closed, ResolvedPublic13 Estimated Story Points

Description

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).

Event Timeline

kai.nissen renamed this task from Investigate CSS-only banner transitions to Implement CSS-only banner transitions.Jan 25 2023, 12:46 PM
kai.nissen updated the task description. (Show Details)
kai.nissen set the point value for this task to 13.
AbbanWMDE moved this task from Doing to Done on the WMDE-FUN-Sprint-2023-03-06 board.
AbbanWMDE subscribed.