etaque/elm-transit/3.0.0

NOTE: this package is not compatible with Elm 0.19.1

Transit

Animated transitions between pages or components for your Elm apps. The purpose of this package is to make it trivial to add transition to you app, so it's a bit opiniated.

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

Model

An opaque type for internal value storage

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

Helper for adding transition on your model

empty : Transition

Empty transition state, as initial value in the model.

type Action

Transition action, to be wrapped in your own action type

Update

Time
-> WithTransition model
-> (Action -> action)
-> ( WithTransition model, Effects action )

Helper that generates a new transition with the following params:

* Animation duration (ms) * Model holding the transition * Action wrapper for the incoming effect (saves one Effects.map)

Returns:

* Updated model with new transition state * Effects for next steps

Action
-> WithTransition model
-> (Action -> action)
-> ( WithTransition model, Effects action )

Helper for walking transition steps, same spec as init but processing actions. Use step` internally.

initAction : Time -> Action

Init action, if you need to produce it manually. See init otherwise.

step : Action -> ( Transition, Effects Action )

Walks transition's next step. See update helper.

View

slideLeftStyle : Transition -> List ( String, String )

A simple left-sliding style value for elm-html.

div [ class "content", style (Transit.slideLeftStyle model.transition) ] someContent

You can create your own with value extract function.

value : Transition -> Maybe Float

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