Data binding 对聚合物中数据绑定引起的DOM变化作出反应

在探索Polymer和Dart的纯粹魅力的同时，我努力在通过数据绑定将一些东西插入DOM之后立即将它们设置为动画

示例：

<template repeat="{{item in items}}">
    <my-item item="{{item}}"></my-item>
</template>

每次插入新项目或删除旧项目时，我都希望设置这些更改的动画

目前，我正在做类似的事情，这很有效，但不是很好：

<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>

[项目]{转换：300ms易入易出；转换：translateX（0）；]
[需要启动动画]{transform:translateX（-100%）；}

在删除它之前，我将“需要结束动画”添加到要删除的元素中。 这个解决方案是可行的，但并不是很好，因为我必须跟踪很多事情，比如在正确的时间添加正确的属性并删除它，对过渡结束做出反应等等

---

因此，我在问您，有没有一种更干净的方法可以对数据绑定引起的DOM更改做出反应？

您可以创建一个mixin，覆盖附加的

和分离的
并在将调用转发给super（元素本身）之前进行属性设置/删除然后将此混合应用于要设置动画的元素

我自己还没有使用过很多mixin。如果mixin不能很好地用于此功能，您可以在普通类中创建一个实现，然后将调用转发到此实现

还可以创建一个包装器元素，该元素只包装要设置动画的元素，并在附加/分离时实现动画。
一如既往的好答案！非常感谢。