在探索 Polymer 和 Dart 的美妙之处时，我很难在通过 Data Binding 将它们插入 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>
在删除它之前，我将“require-end-animation”添加到将被删除的元素中。
该解决方案有效，但并不是那么好，因为我必须跟踪很多东西，例如在正确的时间添加正确的属性并将其删除。对过渡结束等使用react。
因此我问你，有没有一种更简洁的方法来对由数据绑定(bind)引起的 DOM 变化使用react？
最佳答案
您可以创建一个覆盖 attached 的 mixin和 detached并在将调用转发给 super (元素本身)之前进行属性设置/删除，然后将此 mixin 应用于要设置动画的元素。
我自己还没有经常使用mixins。如果 mixin 不能很好地工作，你可以在普通类中创建一个实现，然后将调用转发到 attached。和 detached到这个实现。
它还可以创建一个包装器元素，该元素仅包装您要设置动画的元素并在附加/分离时实现动画。
关于data-binding - 对 Polymer 中的数据绑定(bind)引起的 DOM 变化使用react，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29625194/