Dom-在 Polymer 中重复和霓虹灯动画

Question

我在使用 dom-repeat for neon-animatable in Polymer 时遇到了同样的问题。那么，关于我的问题。当我动态构建页面时，我使用 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 children 时的时间有关。

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

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

长答案

当在 neon-animated-pages 中使用模板 dom-repeat 时，在 Web 组件初始化时无法看到灯光的详细信息 DOM children.

使用静态代码树被视为：

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

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

neon-animated-pages
   - template

因此，当 neon-animated-pages 尝试设置所选页面时，它变得未定义，因为它无法看到 neon-animatable 组件。这些是稍后创建的。此行为在文档 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.

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

该解决方案实质上是等待构建整个树，然后设置所选值，以便所有事件处理程序都能正确看到光线 DOM children 并设置内部引用.

Answer 2

正如 Ade 所提到的，这是霓虹灯动画中的一个记录问题，但此后已得到修复。更新组件（bower 更新，如果您使用的是 bower）以解决该问题。我会把它添加为对 Ade 的回答的评论，但我还没有足够的声誉

Dom-在 Polymer 中重复和霓虹灯动画

Dom-repeat and neon-animatable in Polymer

polymer