Elm Transit Style
elm package install etaque/elm-transit-style
HTML animations for elm-transit's
Transition, to be used on elm-html
style attribute. At the moment we have those, though it's easy to add more:
An ideal companion to elm-transit-router.
How it works
A transition is composed of two phases:
Enter. A style for a phase can be constructed with this signature:
Float -> Style
Float is the clock of transition phase, varying linear from 0 to 1. A
Style is just an alias to
List (String, String).
A complete transition animation is constructed by composing exit and enter animations on a transition:
compose : (Float -> Style) -> (Float -> Style) -> Transition -> Style
It can then be used on a transition. Example for fade and left slide animation, with a 50px offset:
div [ style (TransitStyle.fadeSlide 100 model.transition) ] [ text "Some content" ]
Example for fade and zoom animation with a 5% offset:
div [ style (TransitStyle.fadeZoom 0.05 model.transition) ] [ text "Some content" ]
- Easings are backed by Easing package.