Elm OnAnimationEnd

OnAnimationEnd.elm

module Main exposing (..)

import Html exposing (Html, text, div, Attribute)
import Html.Attributes exposing (class, style, attribute)
import Html.Events exposing (onClick, on)
import Json.Decode as Json exposing (succeed, oneOf)


main : Program Never Model Msg
main =
    Html.program
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }



-- TYPES


type alias Model =
    { message : String
    , class : String
    }


type Msg
    = NoOp
    | DoAnimation
    | DoOtherStuff



-- MODEL


init : ( Model, Cmd Msg )
init =
    ( { message = "Elm program is ready. Get started!"
      , class = ""
      }
    , Cmd.none
    )



-- UPDATE


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        DoAnimation ->
            ( { model | class = "spin" }, Cmd.none )

        NoOp ->
            ( model, Cmd.none )

        DoOtherStuff ->
            ( { model | message = "done" }, Cmd.none )



-- VIEW


view : Model -> Html Msg
view model =
    div
        (captureAnimEnd
            ++ [ onClick DoAnimation ]
            ++ [ class model.class ]
        )
        [ text model.message ]


captureAnimEnd : List (Attribute Msg)
captureAnimEnd =
    List.map (\ae -> on ae (Json.succeed DoOtherStuff))
        [ "webkitAnimationEnd", "oanimationend", "msAnimationEnd", "animationend" ]



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none

style.css

@keyframes spinAround {
    from {
        transform : rotateX(0deg);
    }
    to {
        transform : rotateX(360deg);
    }
}


.spin {
  animation: spinAround 1s linear 1;
}