TransitStyle

Animations for elm-transit, to be used on elm-html style attribute.

div
  [ style (fadeSlide 100 model.transition) ]
  [ text "Some content" ]


div
  [ style (fadeZoom 0.05 model.transition) ]
  [ text "Some content" ]

Combinations

fadeSlide : Float -> Transition -> Style

Combine fade and slideLeft with the specified offset

fadeZoom : Float -> Transition -> Style

Combine fade and zoom with specified offset

Slide left

slide : Float -> Transition -> Style

Slide animation, with the specified offset. Greater than 0 to right, lesser to left.

slideOut : Float -> Float -> Style

Slide out (exit) by translating on X for desired offset

slideIn : Float -> Float -> Style

Slide in (enter) by translating on X for desired offset

Fade

fade : Transition -> Style

Fade animation

fadeOut : Float -> Style

Fade out (exit).

fadeIn : Float -> Style

Fade in (enter).

Zoom

zoom : Float -> Transition -> Style

Zoom animation

zoomIn : Float -> Float -> Style

Zoom in (enter)

zoomOut : Float -> Float -> Style

Zoom out (exit)

Tooling to create animations

compose : (Float -> Style) -> (Float -> Style) -> Transition -> Style

Compose an animation with exit and enter phases.

type alias Style =

List ( String, String )

Just an alias for elm-html style value

Modules

TransitStyle

etaque/elm-transit-style/3.1.0