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

Set up an initial state in your init function.

type alias Model =
    State


yourInit : Model
yourInit =
    init (identifier "unique-id")

The AnimateHeight subscriptions.

type Model
    = State


type Msg
    = AnimatetMsg AnimateHeight.Msg


yourSubs : Model -> Sub Msg
yourSubs model =
    Sub.map AnimateMsg <|
        subscriptions model

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 )

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
            )

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
            )

Cubic bezier timing

yourView : Model -> Html Msg
yourView model =
    container
        (make AnimateHeight
            |> cubicBezier 0.1 0.7 1 0.1
        )

Ease timing

yourView : Html Msg
yourView =
    container
        (make AnimateHeight
            |> ease
        )

Ease-in timing

container
    (make AnimateHeight
        |> easeIn
    )

Ease-in-out timing

yourView : Html Msg
yourView =
    container
        (make AnimateHeight
            |> easeInOut
        )

Ease-out timing

yourView : Html Msg
yourView =
    container
        (make AnimateHeight
            |> easeOut
        )

The container that wraps your view

The example shows a container with nothing in it.

yourView : Html Msg
yourView =
    container (make AnimateHeight)

This is like not having an animation at all. Duration maps to 0

yourView : Html msg
yourView =
    container
        (make AnimateHeight
            |> instant
        )

Animation duration of 200ms

container (make AnimateHeight |> immediate)

Animation duration of 250ms

container (make AnimateHeight |> rapid)

Animation duration of 300ms

container (make AnimateHeight |> fast)

Set the height of the container

yourUpdate : Msg -> Model -> ( Model, Cmd Msg )
yourUpdate msg model =
    case msg of
        ShowTheContent ->
            let
                state =
                    update auto model
            in
            ( state, Cmd.none )

The unique id of the container

yourInit : Model
yourInit =
    init (identifier "some-unique-id")

Linear timing

container
    (make AnimateHeight
        |> linear
    )

A default Config

Argument is a msg that handles Msg's

yourView : Html Msg
yourView =
    container (make AnimateMsg)

If set to True content will fade-in/fade-out while height is animated.

container
    (make AnimateHeight
        |> animateOpacity True
    )

Set a custom duration. Negative values will be converted to their positive equivalent.

custom -333 => 333

container (make |> customTiming 333)

The content the container will animate.

yourView : Html Msg
yourView =
    container
        (make AnimateHeight
            |> content [-- your content]
        )

Sets the State value

type Model
    = State


yourView : Model -> Html Msg
yourView model =
    container
        (make AnimateHeight
            |> state model
        )