andrewMacmurray / elm-simple-animation / Simple.Transition

Build a Html Attribute for applying CSS transitions.


type alias Millis =
Internal.Unit.Millis

Time unit for all Transitions

Create a Transition

properties : List Property -> Html.Attribute msg

Create a transition for a list of properties:

Transition.properties
    [ Transition.opacity 200 [ Transition.delay 100 ]
    , Transition.color 500 [ Transition.easeInOut ]
    ]

Will render a CSS transition: opacity 200ms ease 100ms, color 500ms ease-in-out 0ms.

all : { duration : Millis, options : List Option } -> List (Millis -> List Option -> Property) -> Html.Attribute msg

Create a transition with the same duration, ease and delay for all properties:

Transition.all
    { duration = 500
    , options = [ Transition.delay 200, Transition.linear ]
    }
    [ Transition.opacity
    , Transition.color
    ]

Will render a CSS transition: opacity 500ms linear 200ms, color 500ms linear 200ms.

Transition Options

Customise transition properties.


type alias Option =
Internal.Transition.Option

delay : Millis -> Option

Delay the start of the transition by a number of milliseconds.

Standard Eases

Standard CSS eases

linear : Option

easeIn : Option

easeOut : Option

easeInOut : Option

cubic : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Option

Extended Eases

See what these eases look and feel like: https://easings.net.

easeInSine : Option

easeOutSine : Option

easeInOutSine : Option

easeInQuad : Option

easeOutQuad : Option

easeInOutQuad : Option

easeInCubic : Option

easeOutCubic : Option

easeInOutCubic : Option

easeInQuart : Option

easeOutQuart : Option

easeInOutQuart : Option

easeInQuint : Option

easeOutQuint : Option

easeInOutQuint : Option

easeInExpo : Option

easeOutExpo : Option

easeInOutExpo : Option

easeInCirc : Option

easeOutCirc : Option

easeInOutCirc : Option

easeInBack : Option

easeOutBack : Option

easeInOutBack : Option

Transition Properties


type alias Property =
Internal.Transition.Property

backgroundColor : Millis -> List Option -> Property

borderColor : Millis -> List Option -> Property

color : Millis -> List Option -> Property

opacity : Millis -> List Option -> Property

transform : Millis -> List Option -> Property

property : String -> Millis -> List Option -> Property

Create a custom transition property (for any CSS attribute) - use with care as they may result in janky transitions!

e.g. for SVG fill:

property "fill" 500 []