Describes how to move from one page to another.

transition : Transition (Html msg)
transition =
    Transition.none


otherTransition : Transition (Element msg)
otherTransition =
    Transition.fadeElmUi 300

Don't transition from one page to another.

Can be used with Html msg or Element msg (or another view library)

transitions : Transitions (Html msg)
transitions =
    { layout = Transition.none -- page loads instantly
    , page = Transition.fadeHtml 300
    , pages = []
    }


otherTransitions : Transitions (Element msg)
otherTransitions =
    { layout = Transition.none -- page loads instantly
    , page = Transition.fadeElmUi 300
    , pages = []
    }

Fade one page out and another one in. (For use with mdgriffith/elm-ui)

Animation duration is represented in milliseconds

transitions : Spa.Types.Transitions (Element msg)
transitions =
    { layout = Transition.none
    , page = Transition.fadeElmUi 300 -- 300 milliseconds
    , pages = []
    }

Fade one page out and another one in. (For use with elm/html)

Animation duration is represented in milliseconds

transitions : Spa.Types.Transitions (Html msg)
transitions =
    { layout = Transition.none
    , page = Transition.fadeHtml 300 -- 300 milliseconds
    , pages = []
    }

Create your own custom transition!

Just provide three things:

• duration – how long (in milliseconds) the transition should last.

• invisible – what the page looks like when invisible.

• visible – what the page looks like when visible.

batmanNewspaper : Int -> Transition (Element msg)
batmanNewspaper duration =
    Transition.custom
        { duration = duration
        , invisible =
            \page ->
                el
                    [ alpha 0
                    , width fill
                    , rotate (4 * pi)
                    , scale 0
                    , Styles.transition
                        { property = "all"
                        , duration = duration
                        }
                    ]
                    page
        , visible =
            \page ->
                el
                    [ alpha 1
                    , width fill
                    , Styles.transition
                        { property = "all"
                        , duration = duration
                        }
                    ]
                    page
        }

--
-- using it later on
--
transitions : Spa.Types.Transitions (Element msg)
transitions =
    { layout = batmanNewspaper 500 -- 🦇
    , page = Transition.none
    , pages = []
    }