This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
We were not able to find the expected elm-package.json file at this tag.
Tag 7.0.5
Committed At 2018-10-11 07:44:24 UTC

Modules

    README

    Elm Transit

    elm package 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:

    • Use getValue to get the 1 -> 0 -> 1 varying Float, and getStep to know the current phase of transition.

    • Or use one of the provided functions in elm-transit-style (or create one of your own) to add the visual effect in your view:

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

    Credits