javascript - Polymer:将动画应用于 dom-repeat 模板中的 dom 元素

Question

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

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

Answer 1

我能想到的最简单的方法解决了“已创建”的动画，但仍然需要您为“已销毁”的动画做一些工作。

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

首先，有两个元素，为简单起见，第一个称为 x-repeated，它是带有 dom-repeat 的元素，第二个称为x-animated 表示 dom-repeat 的任何项目。

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

现在，您可能会注意到 x-animated 还在其 detached 回调上运行了一个动画，但它什么也没做，那是因为回调被称为 < em>after 它被分离，所以当动画在这里运行时它不再可见。

所以为了用这个模型做“销毁”动画，你需要先做动画然后再删除，我想你可以通过向“repeater”元素添加一个方法来让你删除给定元素数组的一部分，然后在“动画”元素中调用一个方法来运行动画，然后再删除它。

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

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

更新:旧的 fiddle 不再有效，但@Ali.MD 提供了 this updated version以防万一有人还想检查一下。

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