Animating template repeat insertions/removal

[Aleks Totic]

I want to animate transitions of repeated templates. It is non-obvious how to do it. 

Is there a pattern others are using? Any hints?

What I am trying to do:

    <template repeat="{{item in items}}">

        <div>{{item.title}} {{item.count}}</div>

    </template>

I want to slide in items being added, and fade out items getting removed.

Items list can be modified without me knowing what modification was (firebase-element).

1st attempt was to animate on dom mutation events. 

I'd use events to detect insertion/removal, and animate when detected. Detection used mutations traversal, and is still buggy. This approach feels kludgy: 

- there is code that knows when insertion/removal happens, I should not have to reverse engineer these

- lots of mutation events, feels inefficient

2nd attempt was going to be hacking TemplateBinding. 

TemplateIterator.insertInstanceAt and extractInstanceAt have the data I need. Monkeypatching this will cause future headaches, so I decided to ask the group before diving in.

Thanks,

Aleks

[Tim Cash]

I am also interested in this functionality. Did you come to your own solution?

[Aleks Totic]

I've been working on it. I have something that's a good starting point. See demo at: http://jsbin.com/tepoko/1/edit?html,output

MutationEvents did not work out. Instead, I monitor changes to my the model, and animate additions/deletions.

Aleks

[Carlos Eduardo Garza]

Im also interested in this funcionality.

I find this the polymer demo Topeka provides a leaderboard app using some change animations 

demo

https://www.polymer-project.org/tools/designer/preview.html#ec0200d5f1cc6731d602

topeka-leaderboard element

https://github.com/Polymer/topeka-elements/blob/master/topeka-leaderboard.html

It uses a core-animated-pages and transitions to achieve the result.