CSS Transitions and elm-html

[Sean Clark Hess]

I'm attempting to animate list reordering with elm-html and css transitions, and it's not behaving like I expect it to. Here's what is happening: 

http://g.recordit.co/WanS6yCu2g.gif

I'm setting the position of each item using CSS transforms (translate), and I have transition set to transform 2s. I've set the key attribute of each div so ideally it preserves the same DOM elements. Here's the source. Look at the `cardItem'` function. 

https://github.com/seanhess/apocalyptica/blob/master/src/Test.elm#L199

What did I do wrong? Should I not expect CSS transitions to work with elm-html's virtual dom? 

[Yosuke Torii]

Did you try changing only CSS properties without sorting elements?

not: [one(50px), three(90px), two(130px)]

but: [one(50px), two(130px), three(90px)]

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Sean Hess]

I just tested it and it works as expected. 

Is it possible to get it to work on a sort? I figure there's some kind of fancy element re-use going on, but I thought that was what the key field was for: to make sure the same DOM elements are reused for the same data. 

[Yosuke Torii]

Ah, now I got what you mean. Looks strange. I checked out your repository and saw the behavior on browser. As you said, all the elements were surely reused.

[Sean Hess]

Yeah, sorry I didn't explain well. When I edit the transform of existing elements without resorting, the CSS transitions work perfectly. When I sort a list, it doesn't work. It seems like those two should be doing exactly the same thing. 

Note that react has a ReactCSSTransitionGroup component to help with this for some reason, even though it too has keys. I'm not sure what it does but I suspect that we'll need to duplicate it to get things to work properly?