etaque/elm-transit/7.0.0

NOTE: this package is not compatible with Elm 0.19.1

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

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).

getStep : Transition -> Step

Extract current animation step.

type Step
= Exit
| Enter
| Done

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