etaque/elm-transit/5.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 Effects.tick for animation logic.

Model

Opaque type for transition state storage.

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

Extended type for the target model holding the transition.

initial : Transition

Empty transition state, as initial value in the model.

Timeline

type alias Timeline a =
{ exitDuration : Float
, action : a
, enterDuration : Float
}

Timeline of the transition

timeline : Float -> a -> Float -> Timeline a

Build the timeline:

exitDuration => action => enterDuration

defaultTimeline : a -> Timeline a

Default timeline for this action: exit of 100ms then enter of 200ms.

withExitDuration : Float -> Timeline a -> Timeline a

Update exit duration of timeline.

withEnterDuration : Float -> Timeline a -> Timeline a

Update enter duration of timeline.

Update

type Action a

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

(Action a -> a)
-> Timeline a
-> WithTransition target
-> ( WithTransition target, Effects a )

A shortcut to update that initialize the transition with the following parameters:

  • actionWrapper to wrap Transit's action into your app's Action type (saves you one Effects.map)
  • timeline to setup transition
  • target is the model storing the Transition, that will be updated with new transition state Returns a tuple that you can directly return from your update.
(Action a -> a)
-> Action a
-> WithTransition target
-> ( WithTransition target, Effects a )

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

  • actionWrapper to wrap Transit's action into app's Action type (saves one Effects.map),
  • action is the Transit action to process,
  • target is the model storing the Transition, that will be updated with new transition state.

View

getValue : Transition -> Float

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

getStatus : Transition -> Status

Extract current animation status.

type Status
= Exit
| Enter
| Done

Transition status.