etaque/elm-transit/7.0.5

Transit

Styled transitions with minimal boilerplate, typically for page transitions in single page apps.

See README or example for usage.

Uses elm-animations and Cmd.tick for animation logic.

State

Opaque type for transition state storage.

type alias WithTransition model =
{ model | transition : Transition }

Extended type for the parent model holding the transition.

Empty transition state, as initial value in the model.

Update

type Msg msg

Transition msg, to be wrapped in your own msg type.

(Msg msg -> msg)
-> msg
-> ( Time, Time )
-> WithTransition parent
-> ( WithTransition parent, Cmd msg )

Start the transition with the following parameters:

  • tagger to wrap Transit's Msg into your app's Msg type (consistent with tick signature, saves you one Cmd.map)
  • parentMsg to send at end of exit
  • durations of transition steps (exit phase then enter phase)
  • parent is the model storing the Transition, to update with new transition state

Returns a tuple that you can directly emit from your update.

(Msg msg -> msg)
-> Msg msg
-> WithTransition parent
-> ( WithTransition parent, Cmd msg )

Where all the logic happens. Run transition steps, and triggers timeline's parent message when needed.

  • tagger to wrap Transit's msg into app's Msg type, has to be same type of timeline.msg,
  • msg is the Transit message to process,
  • parent is the model storing the Transition, for transition state update.
subscriptions : (Msg msg -> msg) -> WithTransition parent -> Sub msg

Animation frame subscription. Must be called by your component's subscription function.

View

getValue : Transition -> Float

Extract current animation value (a float between 0 and 1).

Extract current animation step.

type Step
= Exit
| Enter
| Done

Transition step: Exit -> send message -> Enter -> Done.