Transition

Usage

Best Practices

• Use mode="out-in" for keyed panel switches so leaving content finishes before the new panel enters.
• Use TxTransitionPush for hierarchical navigation (drilling into a sub-page and back): pass direction="forward" going in and "back" coming out. Sibling tab switches are not a push; keep them on a fade.
• Use smooth-size when content height changes; use normal fade / slide-fade / rebound for lists and repeated rows.
• Keep list keys stable business ids. Date.now() is fine for docs demos, but production reorderable lists should use persisted ids.
• Keep durations short for repeated UI motion; reserve rebound for small affordances where overshoot is intentional.

API Reference

TxTransition Props

TxTransitionSmoothSize Props

TxTransitionPush Props

Semantic Components

Events

Slots

Content Switch (X)

Transition Content

List Add/Remove (Y)

Transition List

Page Push (Z)

Transition Push

Overview

• class and style are merged onto the outer .tx-transition wrapper; other attrs are forwarded to Transition / TransitionGroup in non-smooth mode.
• smooth-size is a single-child mode. It wraps the child with TxAutoSizer, defaults to height animation, and keeps overflow hidden during measurement.
• group=true switches to TransitionGroup; mode no longer applies and each rendered item must have a stable key.
• TxTransitionPush is single-child too, and moves both pages at once with no mode: the old page is pinned where it stands, at its own size, as position: absolute and made inert (no pointer, Tab stop or assistive-technology access), while the new page stays in flow and sets the container's height. Focus inside the old page is lost with it; the host moves focus to the new page when it switches.
• The container's height tweens from the old page to the new one only during the switch, then returns to auto. While anything moves the container is overflow: clip, not hidden, so focusing the new page right away never scrolls the container; at rest nothing is clipped, so a focus ring inside a page is never cut off.
• An interrupted switch continues from where things are drawn: the container starts from its mid-tween height, and a page still entering leaves from where it is. Turning back to the same key mid-push brings that page back from where the old one stopped.
• Presets share the --tx-transition-duration and --tx-transition-easing CSS variables, except rebound enter easing uses its spring curve intentionally.
• Under prefers-reduced-motion: reduce, every preset collapses to a near-instant duration and drops its translateY/scale offsets, so switches and list motion still complete without animation. TxTransitionPush crossfades in place over 120ms instead and lands the height at once; duration of 0 swaps the page with no animation at all.

Technologies

• Attribute note: class and style land on the .tx-transition wrapper; non-style attrs are forwarded to Vue Transition / TransitionGroup, so they are not visible on the wrapper in tests.
• Smooth-size note: preset="smooth-size" delegates to TxTransitionSmoothSize only when group=false. In grouped lists, it still renders a transition name and should be avoided because the size-aware wrapper is single-child oriented.
• Push note: TxTransitionPush drives the Web Animations API from the JS hooks of <Transition :css="false">: pages animate translate, leaving their own transform alone, and the container animates height. A leave keeps its last frame with fill: 'forwards' until Vue removes the node. A page cut short is resumed from getComputedTiming().progress. class, style and other attrs land on the .tx-transition-push root.
• Verified coverage: transition.test.ts checks preset-to-name mapping, timing CSS variables, group tags, smooth-size delegation, TxAutoSizer sizing prop forwarding, semantic wrapper presets, forwarded attrs, and slot rendering. For TxTransitionPush it checks the push keyframes in both directions and mirrored for right-to-left, pinning and inert on the leaving page, the [old, new] height keyframes (also when nothing enters), height=false, duration=0, the reduced-motion crossfade, interrupted and same-key turnaround switches, appear, and cancelling motion on unmount.
• Component sources: packages/tuffex/packages/components/src/transition/src/TxTransition.vue, TxTransitionSmoothSize.vue, TxTransitionFade.vue, TxTransitionSlideFade.vue, TxTransitionRebound.vue, and TxTransitionPush.vue.
• Types: packages/tuffex/packages/components/src/transition/src/types.ts exports TransitionPreset, TxTransitionProps, TxTransitionSmoothSizeProps, TransitionPushDirection, and TxTransitionPushProps.
• Export alias: packages/tuffex/packages/components/src/transition/index.ts exports installable transition aliases, raw Tx* components, prop types, and instance types.
• Coverage: packages/tuffex/packages/components/src/transition/__tests__/transition.test.ts verifies preset mapping, smooth-size behavior, semantic components, attrs, styles, slots, and the push, height, interrupt and fallback paths of TxTransitionPush.