Polymer：將動畫應用於dom重複模板中的dom元素

Question

通過將數組綁定到Polymer中的dom-repeat模板，您可以通過推送或拼接綁定數組來動態創建和銷燬dom元素。我希望能夠在創建和銷燬這些元素時應用淡入和淡出動畫，類似於angularJS ngRepeat指令的行爲。

當聚合物中的dom-repeat模板創建或銷燬元素時，是否有任何簡單的方法將動畫應用到元素中？

Answer 1

我能想到的最簡單的方法解決了「創建」的動畫，但仍然留下了一些工作要做的「摧毀」的動畫。

我做了一個fiddle，它有一個「創建」動畫的小實例，但我仍然會在這裏解釋它。

首先，有兩個因素，第一個被稱爲x-repeated爲了簡單，它是一個與dom-repeat，第二個被稱爲x-animated並且將代表dom-repeat的任何項目。

這樣做的目的是讓x-animated延伸NeonAnimationRunnerBehavior，以便它可以在其attached回調上運行動畫以執行「創建的」動畫。現在

，你可能會注意到，x-animated也運行動畫在其detached回調，但它不會做任何事情，這是因爲回調被稱爲所以它不再可見由當時的動畫，它已經超脫後在這裏運行。

所以爲了用這個模型來做「破壞」動畫，你需要首先動畫並在稍後移除，我想你可以通過向「repeater」元素添加一個方法來實現，它可以讓你刪除一個給定的數組的元素，然後在移除動畫之前調用「animated」元素中的方法來運行動畫。

我現在可以想到的唯一的其他「簡單」方式就是簡單地從「中繼器」元素添加/刪除項目和動畫。

其他人可能有更好的方法來做到這一點，但我真的不認爲現在有更簡單的方法來做到這一點。