Table of Contents

Class StyleTransitionConfig

Namespace
Velvet
Assembly
Velvet.Docs.dll

CSS-transition-based animation configuration for V.Motion. Drives a USS class swap (enter-from → enter-to / exit-from → exit-to); DurationSec / Easing are applied as inline styles. Use the presets on StyleTransition, optionally tuned via With(float?, EasingMode?, EasingMode?, float?).

public sealed class StyleTransitionConfig
Inheritance
object
StyleTransitionConfig

Fields

None

Sentinel value indicating "no transition": V.Motion(transition: StyleTransitionConfig.None) requests immediate mount/unmount with no animation.

Properties

BezierX1

First control point's X (only meaningful when Type is Bezier). CSS cubic-bezier(x1,y1,x2,y2) parameter order. X must stay in [0,1] (a timing function must be monotone in time); a value outside that range is invalid per the cubic-bezier() spec and degrades to the default curve below with a one-shot warning, rather than being silently clamped. Defaults to cubic-bezier(0.4, 0, 0.2, 1) — the exact curve the bundled USS only approximates with the ease-in-out keyword.

BezierX2

Second control point's X (only meaningful when Type is Bezier). Must stay in [0,1]. See BezierX1.

BezierY1

First control point's Y (only meaningful when Type is Bezier). Left unclamped so an overshoot/anticipate curve is preserved. See BezierX1.

BezierY2

Second control point's Y (only meaningful when Type is Bezier). Left unclamped so an overshoot/anticipate curve is preserved. See BezierX1.

Damping

Spring damping (only meaningful when Type is Spring). Higher values settle with less oscillation.

DelayChildrenSec

A fixed delay (seconds) added before any inheriting descendant's staggered delay — see StaggerChildrenSec for the full propagation contract. 0 (default) means no fixed delay.

DelaySec

Animation start delay (seconds). Applied as the inline CSS transition-delay style. Foundation for stagger (sequentially delayed animations). 0 means no delay (default). Negative values are ignored (transition-delay is not set; behaves as no delay). Note: currently a single delay shared between enter and exit. If a separate exit delay is needed, consider adding ExitDelaySec.

DurationSec

Animation duration (seconds). Applied as the inline transition-duration style. Ignored when Type is Spring: a spring's settle time is decided entirely by Stiffness / Damping / Mass, not a fixed duration. For Bezier it IS the (fixed) duration, exactly as for a plain tween — only the easing sampling differs.

Easing

Easing mode. Applied as the inline transition-timing-function style. Defaults to EaseOut (for enter). Presets in StyleTransition.cs configure enter/exit easing separately. Ignored when Type is Spring: the physics integration IS the curve. Also ignored when Type is Bezier: the BezierX1/BezierY1/BezierX2/BezierY2 control points ARE the curve (an exact numeric one no EasingMode keyword can express).

ExitEasing

Easing mode for exit. When null, Easing is reused. The presets in StyleTransition.cs typically use EaseOut for enter and EaseIn for exit. Ignored when Type is Spring or Bezier: like a spring's single stiffness/damping/mass, one bezier curve drives BOTH directions — there is no separate exit curve.

Mass

Spring mass (only meaningful when Type is Spring). Higher values feel heavier / slower to accelerate.

PropertyOverrides

Optional per-property transition overrides layered on top of the top-level DurationSec / Easing / DelaySec (e.g. opacity tweening in 0.15s while scale takes 0.5s). When set, transition-property switches from the implicit "all" catch-all — used for a variant class swap, which carries no transition-* of its own — to EXACTLY these properties, in declaration order: overrides REPLACE transition-property: all rather than layering on top of it, matching CSS semantics where an explicit transition-property list transitions only what it names. Name every property that should animate. Currently wired only where a variant swap would otherwise set transition-property: all (a variant-driven enter, or an exit driven by a variants + exit label) — a preset transition's own USS-declared transition-property is untouched. Null (default) preserves today's behavior unchanged. Not read when Type is Spring or Bezier: both drive every animated channel with the SAME curve — a spring's Stiffness / Damping / Mass, a bezier's four control points — so there is no per-property override of the model itself (only Tween's per-property duration/easing/delay can be overridden this way).

StaggerChildrenSec

Delay interval (seconds) applied sequentially to each DESCENDANT Motion that inherits its active label from this Motion (it declares variants but no own animate — see Animate) when that ambient label changes: the i-th such inheriting descendant, visited in document order, is delayed an additional DelayChildrenSec + StaggerChildrenSec

  • i on top of its OWN DelaySec. 0 (default) means no stagger (every inheriting descendant responds at the same time). Unlike AnimatePresence's own per-child enter/exit stagger (V.AnimatePresence(staggerSec:)), this orchestrates a PLAIN parent → child label propagation — no AnimatePresence boundary is required; toggling this Motion's animate prop is enough. A descendant with its OWN explicit animate opts out of both the label inheritance and this stagger — it is driven by its own render, not this propagation. The stagger index is transitive: an inheriting descendant with no stagger config of its own passes this orchestration through to ITS OWN inheriting children, who continue claiming from the SAME sequence.
Stiffness

Spring stiffness (only meaningful when Type is Spring). Higher values snap toward the target faster.

Type

Selects the animation model: a USS transition-* class swap (Tween, the default), a physics-integrated spring (Spring), or a fixed-duration tween whose easing is an EXACT numeric cubic-bezier curve (Bezier). See TransitionType for the full contract, including what each does and does not animate.

When

Sequences this Motion's own class swap against its inheriting descendants' swaps (see StaggerChildrenSec) when its active label changes. Defaults to Together.

Methods

With(float?, EasingMode?, EasingMode?, float?)

Builds a new StyleTransitionConfig that overrides duration / easing on top of the preset. Class-name definitions are copied; only the specified parameters are overridden.