React on DOM changes caused by Data Binding in Polymer - data-binding

Question

while exploring the pure awesomeness of Polymer and Dart I struggle to get some things animated right after they get inserted to the DOM by Data Binding.
Example:
<template repeat="{{item in items}}">
<my-item item="{{item}}"></my-item>
</template>
Everytime a new item is inserted or an old one is removed I would like to animate these changes.
Currently I am doing something like this, which works but isn't really nice:
<style>
[item] { transition: 300ms ease-in-out; transform: translateX(0); ]
[require-start-animation] { transform: translateX(-100%); }
</style>
<template repeat="{{item in items}}">
<my-item item="{{item}}" require-start-animation></my-item>
</template>
and before removing it, I add 'require-end-animation' to the elements which will be removed.
The solution works but isn't really that great since I have to keep track of a lot of stuff such as adding the correct attributes at the correct time and removing it. React to transition ending and so on.
Thus I am asking you, is there a cleaner way to react on changes to the DOM which are caused by Data Binding?

Answer 1

You could create a mixin which overrides attached and detached and does the attribute setting/removal before forwarding the call to super (the element itself) and then apply this mixin on elements you want to animate.
I haven't used mixins a lot myself yet. If mixins don't work well for this you could create an implementation in a normal class and then forward the calls to attached and detached to this implementation.
It could also work to create a wrapper element that just wraps the element you want to animate and implements the animation on attach/detach.