polymer - Polymer 中的 Dom-repeat 和 neon-animatable

Question

我在 Polymer 中对 NEON 动画使用 dom-repeat 时遇到了同样的问题。那么，关于我的问题。当我动态构建页面时，我使用 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>  

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

如果谁知道如何解决这个问题，我将不胜感激

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

详细信息:

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

简答:在您的自定义元素上添加一个附加函数来设置所选页面。

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

长答案

当在 neon-animated-pages 中使用模板 dom-repeat 时，在初始化 Web 组件时，它无法看到 light DOM 子级的详细信息。

使用静态代码树被视为:

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

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

neon-animated-pages
   - template

因此，当 neon-animated-pages 尝试设置所选页面时，它会变得未定义，因为它无法看到 neon-animated 组件。这些是稍后创建的。此行为在文档中描述 https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html上面写着

Note that initialization order of may vary depending on whether or not the browser includes native support for web components. In particular, there are no guarantees with regard to initialization timing between sibling elements or between parents and light DOM children. You should not rely on observed timing to be identical across browsers, except as noted below ... This means that an element’s light DOM children may be initialized before or after the parent element, and an element’s siblings may become ready in any order.

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

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