Animate the height of your content.
Transitions that are dispatched in sync with the animation lifecycle.
TransitionStart - Dispatched when an animation starts.
TransitionEnd - Dispatched when an animation ends.
The Float value is the target pixel height at which the animation will end.
TransitionStart
200 -> The animation has started and will end at 200px
TransitionEnd
200 -> The animation has ended at the height of 200px
init : Identifier -> State
Set up an initial state in your init function.
type alias Model =
State
yourInit : Model
yourInit =
init (identifier "unique-id")
subscriptions : State -> Platform.Sub.Sub Msg
The AnimateHeight
subscriptions.
type Model
= State
type Msg
= AnimatetMsg AnimateHeight.Msg
yourSubs : Model -> Sub Msg
yourSubs model =
Sub.map AnimateMsg <|
subscriptions model
update : Msg -> State -> ( Maybe Transition, State, Platform.Cmd.Cmd Msg )
Add a branch in your update to handle the AnimateHeight
Msg's.
type Model
= State
yourUpdate : Msg -> Model -> ( Model, Cmd Msg )
yourUpdate msg model =
case msg of
AnimateMsg animMsg ->
let
( transition, newState, cmds ) =
update animMsg model
in
( newState, Cmd.map AnimateMsg cmds )
auto : Internal.HeightVariant
Will transition to the height of the content.
When the container reaches the content height it will set the height to auto
.
type Model
= State
update : msg -> Model -> ( Model, Cmd msg )
update msg model =
case msg of
SeeContent ->
let
state =
height auto model
in
( state
, Cmd.none
)
fixed : Basics.Float -> Internal.HeightVariant
Will transition to the height you set.
Values translate to px values. e.g. 200 -> 200px
type Model
= State
update : msg -> Model -> ( Model, Cmd msg )
update msg model =
case msg of
SeeContent ->
let
state =
height (fixed 200)
in
( state
, Cmd.none
)
fixedAtAuto : Internal.HeightVariant
Will transition to the fixed height of the container.
This is handy if you want to animate the height of a fixed container when adding or removing content.
type Model
= State
update : msg -> Model -> ( Model, Cmd msg )
update msg model =
case msg of
ContentRemoved ->
let
state =
height fixedAtAuto
in
( state
, Cmd.none
)
cubicBezier : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Config msg -> Config msg
yourView : Model -> Html Msg
yourView model =
container
(make AnimateHeight
|> cubicBezier 0.1 0.7 1 0.1
)
ease : Config msg -> Config msg
yourView : Html Msg
yourView =
container
(make AnimateHeight
|> ease
)
easeIn : Config msg -> Config msg
container
(make AnimateHeight
|> easeIn
)
easeInOut : Config msg -> Config msg
yourView : Html Msg
yourView =
container
(make AnimateHeight
|> easeInOut
)
easeOut : Config msg -> Config msg
yourView : Html Msg
yourView =
container
(make AnimateHeight
|> easeOut
)
container : Config msg -> Html msg
The container that wraps your view
The example shows a container with nothing in it.
yourView : Html Msg
yourView =
container (make AnimateHeight)
instant : Config msg -> Config msg
This is like not having an animation at all. Duration maps to 0
yourView : Html msg
yourView =
container
(make AnimateHeight
|> instant
)
immediate : Config msg -> Config msg
Animation duration of 200ms
container (make AnimateHeight |> immediate)
rapid : Config msg -> Config msg
Animation duration of 250ms
container (make AnimateHeight |> rapid)
fast : Config msg -> Config msg
Animation duration of 300ms
container (make AnimateHeight |> fast)
height : Internal.HeightVariant -> State -> State
Set the height of the container to animate to.
This will produce animation events. Checkout Transition to find out how transition events work.
yourUpdate : Msg -> Model -> ( Model, Cmd Msg )
yourUpdate msg model =
case msg of
ShowTheContent ->
let
state =
height auto model
in
( state, Cmd.none )
heightAt : Internal.HeightVariant -> State -> State
Set the height of the container.
This will not animate or produce animation events. Useful for when you want to set the starting height of the container without animating to it..
yourInit : Model
yourInit =
init (identifier "unique-id")
|> heightAt auto
getViewport : State -> Platform.Task Browser.Dom.Error Browser.Dom.Viewport
A task for the Viewport information of the container.
getViewport state => Task Error Viewport
identifier : String -> Identifier
The unique id of the container
yourInit : Model
yourInit =
init (identifier "some-unique-id")
linear : Config msg -> Config msg
container
(make AnimateHeight
|> linear
)
make : (Msg -> msg) -> Config msg
A default Config
Argument is a msg that handles Msg's
yourView : Html Msg
yourView =
container (make AnimateMsg)
animateOpacity : Basics.Bool -> Config msg -> Config msg
If set to True
content will fade-in/fade-out while height is animated.
container
(make AnimateHeight
|> animateOpacity True
)
customTiming : Basics.Float -> Config msg -> Config msg
Set a custom duration. Negative values will be converted to their positive equivalent.
custom -333 => 333
container (make |> customTiming 333)
content : List (Html msg) -> Config msg -> Config msg
The content the container will animate.
yourView : Html Msg
yourView =
container
(make AnimateHeight
|> content [-- your content]
)
state : State -> Config msg -> Config msg
Sets the State value
type Model
= State
yourView : Model -> Html Msg
yourView model =
container
(make AnimateHeight
|> state model
)