etaque/elm-transit - version: 7.0.5

for more information visit the package's GitHub page

Package contains the following modules:

Elm Transit

elm install etaque/elm-transit

Delayed actions with transition progress for enter/exit animations in Elm.

See also:

Usage

(Full working example here)

Use WithTransition record extension to extend your own model:

import Transit

-- see recursive type param: Transit needs to know the type of message it will send delayed
type Msg
  = NavigateTo Page
  | SetPage Page
  | TransitMsg (Transit.Msg Msg)

type Page = Page1 | Page2

type alias Model =
  Transit.WithTransition { page: Page }

You're not bound to root model, you can also use it for sub-pages or components transitions.

Then wrap Msg in one of your action types and call start and tick in your update function.

update : Msg -> Model -> (Model, Cmd Msg)
update action model =
  case action of

    NavigateTo page ->
      -- exit phase of 100ms, then `(SetPage page)` will be sent, then enter phase of 200ms
      Transit.start TransitMsg (SetPage page) ( 100, 200 ) model

    TransitMsg a ->
      Transit.tick TransitMsg a model

    SetPage page ->
      ({ model | page = page }, Cmd.none)

A subscription is necessary to receive animation frame ticks when transition is running:

subscriptions : Model -> Sub Msg
subscriptions model =
  Transit.subscriptions TransitMsg model

In your views, you can then either:

  div (TransitStyle.fadeSlideLeft 50 model.transition) [ text "Some content" ]

Credits