Module

Halogen.Widgets.Motion

Package: purescript-halogen-widgets
Repository: afcondon/purescript-halogen-widgets

Optional, opt-in transition timing for the widgets that can animate a state change (the accordion chevron, the accordion body reveal).

The kit's default is NoMotion — instant, no easing — on purpose: the house style is restraint, and a widget toolkit should not impose animation on consumers who did not ask for it. A consumer opts a single widget into an eased transition by passing Motion (or the ready-made defaultMotion) in that widget's Input. Nothing animates library-wide; you turn it on where you want it.

transition renders the CSS declaration these widgets splice into their inline styles, and emits the empty string under NoMotion — so the un-opted-in path adds no transition at all. (For users who opt in but set the OS "reduce motion" preference, css/halogen-widgets.css carries a prefers-reduced-motion block that neutralises these transitions.)

#Motion Source

data Motion

Whether — and how — a state change animates. NoMotion is the default everywhere; Motion d e eases over duration d with timing function e.

Constructors

NoMotion
Motion Milliseconds Easing

#Easing Source

data Easing

The CSS timing functions, named rather than stringly-typed.

Constructors

#defaultMotion Source

defaultMotion :: Motion

A pleasant opt-in default for callers who just want "animate it, sensibly": 180 ms, decelerating. Pass this rather than inventing a duration.

#easingCss Source

easingCss :: Easing -> String

#transition Source

transition :: String -> Motion -> String

Build a transition: declaration (with trailing ;) for the given CSS property list, or the empty string under NoMotion:

transition "transform" defaultMotion
  == "transition:transform 180ms ease-out;"
transition "transform" NoMotion == ""

Modules: Halogen.Widgets.Accordion.Internal; Halogen.Widgets.Compare; Halogen.Widgets.DoubleKnob; Halogen.Widgets.Field; Halogen.Widgets.HAccordion; Halogen.Widgets.Knob; Halogen.Widgets.Modal; Halogen.Widgets.Motion; Halogen.Widgets.Panel; Halogen.Widgets.SegmentedControl; Halogen.Widgets.Select; Halogen.Widgets.Slider; Halogen.Widgets.Stepper; Halogen.Widgets.Style; Halogen.Widgets.Toast; Halogen.Widgets.Toggle; Halogen.Widgets.VAccordion