Skip to main content

Module crossfade

Module crossfade 

Source
Expand description

Crossfade — when an external Signal<K> changes, the previous content fades out while the new content fades in over the same window. Like Switcher, but animated.

let tab = Signal::new(Tab::Overview);
ctx.add(
    Crossfade::new(tab.clone(), |t| match t {
        Tab::Overview => Box::new(overview_panel()),
        Tab::Details  => Box::new(details_panel()),
    }),
);

§Behavior

On each key change, both the previous-key widget and the current-key widget are rebuilt (via the supplied builder) and mounted side-by-side in a ZStack. The previous fades 1→0 while the current fades 0→1 over the configured duration. On the next key change, the previously-outgoing widget is torn down and the cycle repeats.

Builders should be cheap — they may run more than once per lifetime as the user navigates through several keys. For data- heavy panels, hoist expensive state out of the builder closure.

§Reduced motion

Honours prefers-reduced-motion: snaps the opacity changes instead of tweening (instant swap).

Structs§

Crossfade
Animated swap between widgets keyed by an external signal.