Why is Elm SVG animation only run once?

Viewed 364

I'm trying to create a bar graph using elm/svg which contains a transition when y values change.

I tried using CSS transitions to no avail, so I've moved onto using the Svg.animate function. This does work, but only once. The y value is animated when the graph is initially rendered but never again, even though the relevant model values are changing.

Here's a greatly simplified version of my elm (0.19) program:

type alias Model = { newSpeed : String, oldSpeed : String }


initialModel : Model
initialModel = { newSpeed = "90%", oldSpeed = "100%" }


type Msg
    = IncrementSpeed


update : Msg -> Model -> Model
update msg model =
    case msg of
        IncrementSpeed ->
            { model | newSpeed = "40%" }


view : Model -> Html Msg
view model =

            div
            []
            [ svg
                [ width "666"
                , height "666"
                , viewBox "0 0 666 666"
                ]
                [ rect
                    [ x "22"
                    , y model.newSpeed
                    , width "22"
                    , height "100%"
                    ]
                    [ animate
                        [ attributeName "y"
                        , from model.oldSpeed
                        , to model.newSpeed
                        , dur "1s"
                        ]
                        []
                    ]
                ]
            , button [ onClick IncrementSpeed ] [ Html.text "+1 speed" ]
            ]

It's also available on Ellie.

EDIT:

Interestingly, if I set the repeatCount attribute to $N or "indefinite", the transition/animation works as I was hoping it would. Unfortunately, it continues to play after the first run through.

0 Answers
Related