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

时间:2016-01-08 20:36:09

标签: javascript animation dom polymer

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

在Polymer中使用dom-repeat模板创建或销毁动画时,是否有简单的方法将动画应用于元素?

1 个答案:

答案 0 :(得分:0)

我能想到的最简单的方法是解决"创建的"动画,但仍然留给你一些工作要做的"被毁坏"动画。

我创建了一个fiddle,其中包含一个小小的工作示例"已创建"动画,但我仍然在这里解释。

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

这样做的目的是让dom-repeat扩展x-animated,以便它可以在NeonAnimationRunnerBehavior回调上运行动画来执行"创建"动画。

现在,您可能会注意到attached也在其x-animated回调上运行动画,但它没有做任何事情,因为回调被称为之后,它已被分离,因此在动画运行时它不再可见。

所以为了做"销毁"使用此模型的动画,您需要先设置动画并稍后删除,我猜您可以通过向" repeater"添加方法来实现。允许您删除数组的给定元素并在"动画"中调用方法的元素在移除动画之前运行动画的元素。

唯一的其他"简单"我现在可以想到这样做的方法就是简单地同时添加/删除项目以及来自" repeater"元件。

其他人可能有更好的方法来做到这一点,但我并不认为现在这样做的方式要简单得多。

<强>更新 旧的小提琴不再有效,但是@ Ali.MD提供this updated version,以防有人想要查看它。

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