Почему анимация Elm SVG запускается только один раз? - PullRequest
Новая
       21

Почему анимация Elm SVG запускается только один раз?

0 голосов
/ 16 сентября 2018

Я пытаюсь создать гистограмму, используя 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" ]
            ]

Это также доступно на Элли .

EDIT:

Интересно, что если установить для атрибута repeatCount значение $ N или «неопределенный», переход / анимация будут работать так, как я надеялся. К сожалению, он продолжает играть после первого пробега.

...