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

我试图使用elm/svg创建一个条形图,其中包含y值更改时的转换。

我尝试使用CSS转换,但没有成功,所以我开始使用 Svg.animate 功能。这确实有效,但只有一次。当图形最初呈现时,y值将设置动画,但不会再次呈现,即使相关的模型值正在更改。

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美元或“无限期”,过渡/动画工作,因为我希望它会。不幸的是,它继续播放后,第一次运行通过。