Build a Html Attribute for applying CSS transitions.
Internal.Unit.Millis
Time unit for all Transitions
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
.
Customise transition properties.
Internal.Transition.Option
delay : Millis -> Option
Delay the start of the transition by a number of milliseconds
.
Standard CSS eases
linear : Option
easeIn : Option
easeOut : Option
easeInOut : Option
cubic : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Option
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
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 []