skills.rest
videojs
videojsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

implement-ui-transition

Implement shared UI transition lifecycle state across HTML and React components.

931|91|Updated Aug 13, 2025
Search Tags:#CSS#web components#videojs#reAct#ui transitions#animation lifecycle#State Machine
One-click install
npx skills add https://github.com/videojs/v10 --skill implement-ui-transition
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implement-ui-transition
Source: https://github.com/videojs/v10/tree/main/.agents/skills/implement-ui-transition
Command: npx skills add https://github.com/videojs/v10 --skill implement-ui-transition

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI transitions often break under cancellation, rapid reopen, or framework-specific presence handling, causing flicker, stuck elements, or lost payload data. This Skill guides implementation of a shared transition lifecycle so HTML and React adapters behave identically.

Core Features & Use Cases

  • Shared Transition State: Reuse TransitionState, TransitionDataAttrs, and createTransition instead of component-local timers or framework-only presence logic.
  • CSS-Owned Motion: Apply data-starting-style and data-ending-style attributes while CSS controls duration, easing, and transforms.
  • Race-Safe Lifecycle: Handle no-animation completion, cancellation, rapid reopen, repeated exit updates, disconnect, and destroy without inferring completion from fixed CSS durations.
  • Use Case: Keep a chapter indicator mounted while its exit animation completes, retaining its payload data and cleaning up safely if the user reopens it mid-exit.

Quick Start

Implement a UI transition for the popover component that keeps exiting content mounted until the animation completes and works identically in the HTML and React packages.

Frequently Asked Questions about implement-ui-transition

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I keep a component mounted during its exit animation?▼

Track rendered presence separately from logical state using the shared transition lifecycle. Keep content active during the data-ending-style phase, retain payload data needed to render the exiting state, and clean up only on transition completion.

How do I share transition logic between HTML and React components?▼

Adapt the same core transition state into both HTML and React integrations rather than adding framework-only presence state. Keep immediate change callbacks distinct from completion callbacks so both adapters behave identically.

Why does my transition break on rapid reopen or cancellation?▼

Completion inferred from fixed CSS durations fails when animations are interrupted. Handle no-animation completion, cancellation, rapid reopen, and repeated updates during exit explicitly in the transition state machine.

Should transition timing live in JavaScript or CSS?▼

CSS should own duration, easing, transforms, and presentation, while JavaScript owns logical state and rendered presence. Apply data-starting-style before the first visible frame and never infer completion from a hardcoded duration.

How do I support reduced motion in UI transitions?▼

Preserve a usable reduced-motion path without changing semantic state or focus order. The transition lifecycle must still complete correctly when animations are disabled or shortened by user preferences.

Related Skills

Explore More Software Engineering Skills→
dembrandtdembrandt
33

button-states

Define complete visual interaction states for buttons and clickable elements.

Official
Intermediate
zaid-khan-codezaid-khan-code
3

react-testing

Test React components, hooks, context, and forms with Vitest Browser Mode.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

Detect CSS animations and transitions lacking prefers-reduced-motion media query coverage.

Community
Intermediate
47thtechcorner47thtechcorner
21

remotion

Provide custom transitions and shared React components for Remotion video projects.

Community
Advanced