CSS Motion State and Interruption

Working case

Reviewer 29 opens case 47 from a queue. The details panel moves a short distance and fades in, while its heading, expanded state, and available actions update immediately. Reviewer 29 closes the panel before the entrance finishes. The style now follows closed state; no delayed timer reopens it. A save completes while the panel is closing, and the stored case status remains saved. A user with reduced motion sees the same information and controls without the travel effect. A keyboard user does not need to wait for a visual transition before reaching the content.

Implementation boundary

function nextPanelState(currentState, command) {
  if (command === "open") return "open";
  if (command === "close") return "closed";
  return currentState;
}
console.log(nextPanelState("open", "close"));
// Output: closed

Represent open, closed, saving, and error as application states first. Use a class or attribute to map those states to CSS values, with explicit transition properties and a narrow duration. Avoid depending on transitionend for core state commits: the event may not fire when an element is removed, the property does not change, or motion is disabled. If a cleanup action needs a visual completion, provide a direct path when animation is skipped and a timeout guard for interruption. Keep focus management independent of the visual timeline. Test opening and closing rapidly with pointer and keyboard input.

Cost and boundaries

Transform and opacity often avoid repeated layout work, but opacity on a large translucent surface can still cost paint or composition memory. Animating width or top can trigger layout work for descendants each frame. A transition on every list card may add many active layers during a bulk update, so measure a real board at target density. The JavaScript state update is O(1), while rendering cost depends on affected pixels and elements, not only the property name. Record dropped frames and input delay under load.

Failure trace

A component sets its hidden attribute only after transitionend, then reduced motion removes the transition and leaves the invisible panel in the focus order. Another implementation uses transition: all; a responsive width change causes unrelated controls to drift. Test no-animation mode, a rapid open-close-open sequence, a DOM removal mid-transition, a case list with 47 moving cards, zoom, background-tab throttling, and a save error arriving during exit. Ensure the semantic state and final style always agree.

Verification

• Panel state remains correct when motion is disabled.
• Rapid commands settle on the latest state.
• Focus does not wait for a visual event.

Practice drill

Model panel state with explicit open and closed values. Disable animation in a test and confirm content and focus still update. Trigger three opposing state changes inside one second, then inspect the final expanded state and visible controls. Profile a 47-card board while only one card changes. Replace a broad transition rule with the two properties users need, and verify no layout-dependent visual jump remains.

Decision note

Commit semantic state immediately and let a narrow, interruptible transition follow it.

Common Mistakes

• Using transitionend as the only state commit.
• Animating every property with a broad rule.
• Treating hidden opacity as removal from keyboard access.

Connected lessons

Build Project: case board motion and route continuity and review Web Development: motion and regional state decisions quiz; follow Motion and View Change Contracts; Web Animations Lifecycle and Cancellation; View Transition Navigation, Focus, and Fallback; Reduced Motion and Rendering Budget; Reflow, Zoom, and Motion Preferences; Page performance: budget the critical path and reserve layout space.