Polymer Dom重复和霓虹灯可在聚合物中设置动画

我有一个相同的问题，使用dom重复霓虹灯动画在聚合物。 关于我的问题。当我构建动态页面时，我使用dom repeat来构建一定数量的页面。在代码中

        <neon-animated-pages id="views"
                             class="flex"
                             selected="[[selected]]"
                             entry-animation="[[entryAnimation]]"
                             exit-animation="[[exitAnimation]]">
            <template is="dom-repeat" items="{{dataView}}">
                <neon-animatable id="{{item.id}}">
                    <inner-content data="{{item.content}}"></inner-content>
                </neon-animatable>
            </template>
        </neon-animated-pages>  

构建此页面后，我有一个页面，其中包含一定数量的霓虹灯可动画页面，但在第一次单击按钮查看下一页后，动画不起作用，但如果单击更多按钮，动画工作正常。 所以，我不明白为什么first animate不起作用

如果谁对如何解决这个问题有什么想法，我将不胜感激

关于我的观察结果 在这样的静态代码中使用时

<neon-animated-pages>
<neon-animatable>page 1</neon-animatable>
<neon-animatable>page 2</neon-animatable>
<neon-animatable>page 3</neon-animatable>
</neon-animated-pages>

第1页
第2页
第3页

---

第一次运行的动画

这对于将来的版本来说是固定的：

详细信息：

我遇到了同样的问题，它似乎与创建light DOM子项的时间有关

简短回答：在自定义元素上添加一个附加函数，用于设置所选页面

attached: function () {
    this.async(function () {
        this.$.pages.select(0);
    });
}

长答案

当在neon动画页面中使用模板dom repeat时，在初始化web组件时，它无法看到light dom子级的详细信息

使用静态代码，树被视为：

neon-animated-pages
   - neon-animatable
   - neon-animatable
   - neon-animatable

在初始化时使用dom repeat看起来像：

neon-animated-pages
   - template

因此，当霓虹灯动画页面尝试设置所选页面时，由于无法看到霓虹灯可动画组件，因此无法定义该页面。这些将在以后创建。文档中描述了这种行为，其中

请注意，的初始化顺序可能会有所不同，具体取决于浏览器是否包含对web组件的本机支持。特别是，对于兄弟元素之间或父元素与轻DOM子元素之间的初始化时间，没有任何保证。你不应该依赖于观察到的时间在不同浏览器中是相同的，除非如下所述。。。这意味着可以在父元素之前或之后初始化元素的light DOM子元素，并且元素的同级可以以任何顺序就绪

当light DOM子项开始填充时，会调用IronSelectableBehavior上的观察者函数“\u updateSelected”，该函数是NeonAnimatedPages的父项，以根据内容更新更新选择。 但是，NeonAnimatedPages还维护内部引用以识别所选项目，并使用观察者功能“_selectedChanged”设置引用和控制动画。本质上，它根据是否选择了上一个元素来决定是否显示动画。根据上面的树，当在初始化时调用此方法时，它看不到完整的树，并将以前选择的树设置为未定义。在填充light DOM时，不会调用此处理程序，因为所选值不会更改，而内容会更改。其结果是，虽然IronSelectableBehavior正确地知道选择了什么，但NeonAnimatedPages仍然认为没有选择任何内容，并且当您更改初始屏幕时，它将其视为初始加载，因为它认为没有选择任何内容并抑制动画

---

该解决方案基本上等待整个树的构建，然后设置所选的值，以便所有事件处理程序都能够正确地看到light DOM子级并设置内部引用。

正如Ade所提到的，这是neon动画中记录的问题，但它已被修复。更新组件（如果使用bower，则更新bower）以解决问题。我本想在Ade的回答中添加此作为评论，但如果您想使用

attrForSelected

add

this.$.pages.attrForSelected='my attr'，我的声誉还不够好到附加的函数调用。至少为我做了这件事。