聚合物：将动画应用于dom-repeat模板中的dom元素

Question

通过将数组绑定到Polymer中的dom-repeat模板，您可以通过推送或拼接绑定数组来动态创建和销毁dom元素。 我希望能够在创建和销毁这些元素时将淡入和淡出动画应用于这些元素，类似于angularJS ngRepeat指令的行为。

当聚合物中的dom-repeat模板创建或销毁动画时，是否有任何简单的方法可以将动画应用于元素？

Answer 1

我能想到的最简单的方法是解决“创建”的动画，但仍然需要为“被破坏的”动画做一些工作。

我用一个“创建”动画的小例子做了一个小提琴 ，但我仍然会在这里解释一下。

首先，有两个元素，第一个被称为x-repeated以简化，它是带有dom-repeat的元素，第二个被称为x-animated ，它代表dom-repeat任何项目。

这样做的目的是使x-animated扩展NeonAnimationRunnerBehavior以便它可以在其attached回调上运行动画来执行“创建”动画。

现在，您可能会注意到x-animated还在其detached回调上运行动画，但它没有做任何事情，这是因为回调在分离后被调用，因此在动画运行时它不再可见。

因此，为了使用此模型执行“销毁”动画，您需要先设置动画并稍后删除，我想您可以通过向“repeater”元素添加一个方法来执行此操作，该方法允许您删除数组的给定元素然后在“动画”元素中调用方法以在移除动画之前运行动画。

我现在能想到的唯一其他“简单”方法就是简单地同时添加/删除项目和“repeater”元素中的动画。

其他人可能有更好的方法来做到这一点，但我真的不认为现在这样做有一个更简单的方法。

更新：旧的小提琴不再有效但@ Ali.MD提供了此更新版本 ，以防有人想要查看它。

但是，考虑到我们现在生活在Polymer 3.0 / LitElement世界中，你现在应该只使用CSS动画。