Transitions that are dispatched in sync with the animation lifecycle.

TransitionStart - Dispatched when an animation starts.

TransitionEnd - Dispatched when an animation ends.

The parameter on each type represents the target view.

TransitionStart view1 -> The transition has started and will switch from the current view to the view1 view.

TransitionEnd view1 -> The transition has ended and the view1 view is rendered.

type YourViews
  = View1
  | View2


yourUpdate msg yourModel =
  case msg of
    SwitchMsg msg ->
      let
          (maybeTransition, updatedState, cmds) =
              update msg yourModel.switchState


          handleTransition =
            case maybeTransition of
              Just ( TransitionStart View1 ) ->
                -- Do something


              Just (TransitionEnd View2) ->
                -- Do something
      in
      ({model | switchState = updatedState}, Cmd.map SwitchMsg cmds)

Initialize a Switch State

NOTE: Ensure you store the State structure in your model.

type YourView
    = View1
    | View2


type alias Model =
    { switchState : State YourView
    }


yourInit =
    { switchState = init (identifier "some-unique-string") }

Subcriptions for the switch.

type alias Model =
    { switchState : State }


type Msg
    = SwitchMsg Switch.Msg


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

Add a branch in your update to handle the Switch Msg's.

type alias Model =
    { switchState : State }


type Msg
    = SwitchMsg


yourUpdate : Msg -> Model -> ( Model, Cmd Msg )
yourUpdate msg model =
    case msg of
        SwitchMsg switchMsg ->
            let
                ( transition, newState, cmds ) =
                    update switchMsg model.switchState
            in
            ( { model | switchState = newState }
            , Cmd.map SwitchMsg cmds
            )

A default Config

Argument is a msg that handles Msg's

switchConfig : Config YourViews
switchConfig =
    make SwitchMsg

Cubic bezier timing

make SwitchView
    |> cubicBezier 0.1 0.7 1 0.1

Ease timing

 make SwitchView
      |> ease

Ease-in timing

make SwitchView
    |> easeIn

Ease-in-out timing

make SwitchView
    |> easeInOut

Ease-out timing

  make SwitchView
      |> easeOut

Linear timing

make SwitchView
    |> linear

Set the view without transitions.

Useful for when you want to set an initial view without animating to it.

type YourView
    = View1
    | View2


yourInit : Model
yourInit =
    init (identifier "unique-id")
        |> fixView View1

Switch from a current view to a new view.

If no current view exists the incoming view will still transition in.

type alias Model =
    { switchState : State }


type YourMsg
    = ChangeView


yourUpdate model msg =
    case msg of
        ChangeView ->
            let
                newState =
                    toView (Just View2) model.switchState
            in
            ( { model | switchState = newState }, Cmd.none )

Render the switch view

type YourView
    = View1
    | View2
    | View3


viewResolver : YourView -> List (Html msg)
viewResolver v =
    case v of
        View1 ->
            [ text "View 1" ]


        View2 ->
            [ text "View 2" ]


        View3 ->
            [ text "View 3" ]


yourView : Model -> Html Msg
yourView model =
    view viewResolver (make SwitchView) model.switchView

A unique indentifier that Switch uses internally.

NOTE: The String passed must be unique.