for more information visit the package's GitHub page
Package contains the following modules:
elm install etaque/elm-transit-style
HTML animations for elm-transit's Transition
, to be used on elm-html Attribute
. At the moment we have those, though it's easy to add more:
fade
slide
zoom
fadeSlide
fadeZoom
A transition is composed of two phases: Exit
then Enter
. A style for a phase can be constructed with this signature:
Float -> List (Attribute msg)
where the Float
is the clock of transition phase, varying linear from 0 to 1.
A complete transition animation is constructed by composing exit and enter animations on a transition:
compose : (Float -> List (Attribute msg)) -> (Float -> List (Attribute msg)) -> Transition -> List (Attribute msg)
It can then be used on a transition. Example for fade and left slide animation, with a 50px offset:
div
( TransitStyle.fadeSlide 100 model.transition )
[ text "Some content" ]
Example for fade and zoom animation with a 5% offset:
div
( TransitStyle.fadeZoom 0.05 model.transition )
[ text "Some content" ]