为什么Elm SVG动画只能运行一次？

Question

我正在尝试使用elm / svg创建条形图，其中包含y值更改时的过渡。

我尝试使用CSS过渡无济于事，所以我继续使用Svg.animate函数。这确实有效，但是只有一次。 y值在最初绘制图形时就具有动画效果，即使相关的模型值正在更改，也不会再显示。

这是我的elm（0.19）程序的简化版本：

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" ]
            ]

它也可以在Ellie上使用。

编辑：

有趣的是，如果我将repeatCount属性设置为$ N或“不确定”，则过渡/动画将按照我希望的那样工作。不幸的是，它在第​​一次运行后仍然可以播放。