4

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.

pdoherty926
  • 9,895
  • 4
  • 37
  • 68
  • 1
    One workaround is use indefinite, and then set a timer (e.g. see https://stackoverflow.com/questions/40599512/how-to-achieve-behavior-of-settimeout-in-elm) to remove the animation element after 1s. – Martin Capodici Nov 20 '18 at 19:53
  • 1
    You don't explain what it is you wanted to actually render, so it's hard to suggest a fix. Can you describe the animation you want? – Nowhere man Nov 03 '19 at 13:09

0 Answers0