Question

我在聚合物中使用dom-repeat对于neon-animatable也有同样的问题。所以，关于我的问题。当我动态构建页面时，我使用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>

在构建此页面后，我有一个页面，其中包含一定数量的霓虹灯动画页面，但在第一次点击按钮查看下一页后，动画不起作用，但如果点击按钮更多，动画工作精细。所以，我无法理解为什么第一个动画不能工作

如果谁对如何解决这个问题有所了解，我将不胜感激

P.S关于我的观察在像这样的静态代码中使用时

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

动画第一次运行

Answer 1

对于将来的版本，这似乎是固定的：https://github.com/PolymerElements/neon-animation/issues/55

<强>详细信息：

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

简短回答：在您的自定义元素上添加一个设置所选页面的附加功能。

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

长答案

当在霓虹动画页面内使用模板dom-repeat时，在初始化web组件时，它无法看到轻DOM子项的细节。

使用静态代码树被视为：

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

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

neon-animated-pages
   - template

因此，当霓虹动画页面试图设置所选页面时，它会被定义，因为它无法看到霓虹动画组件。这些将在以后创建。文档https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html中描述了此行为

请注意，初始化顺序可能会有所不同，具体取决于浏览器是否包含对Web组件的本机支持。特别是，不能保证兄弟元素之间或父母与轻DOM子女之间的初始化时间。您不应该依赖于观察到的时间在浏览器中是相同的，除非如下所述...这意味着元素的轻DOM子项可以在父元素之前或之后初始化，并且元素的兄弟可以按任何顺序准备好。 / p>

当轻型DOM孩子开始填充时，会对观察者功能进行调用＆＃34; _updateSelected＆＃34;在IronSelectableBehavior上，它是NeonAnimatedPages的父级，用于根据内容更新更新选择。但是，NeonAnimatedPages还维护内部引用以识别所选项目并使用观察者函数＆＃34; _selectedChanged＆＃34;设置引用和控制动画。基本上它决定根据是否选择了前一个元素来显示动画。基于上面的树，当在初始化时调用此方法时，它无法看到完整的树，并且它先前选择为未定义。随着轻量级DOM的填充，不会调用此处理程序，因为所选值不会更改，只有内容正在更改。结果是，当IronSelectableBehavior正确地知道所选内容时，NeonAnimatedPages仍然认为没有选择任何内容，并且当您进行初始屏幕更改时，它会将其视为初始加载，因为它认为没有选择任何内容并禁止动画。

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

Answer 2

正如阿德提到的，这是霓虹动画中的一个记录问题，但它已被修复。更新组件（bower更新，如果您正在使用bower）来解决问题。我想补充这一点作为对Ade的答案的评论，但我还没有足够的声誉

聚合物中的Dom-repeat和neon-animatable

2 个答案: