Dom-repeat and neon-animatable in Polymer

Asked By: Anonymous

I have a same problem with use dom-repeat for neon-animatable in Polymer.
So, about my problem. When I dynamic building page, I use dom-repeat for building a certain number of pages. In code that look like

        <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>  

After builded this page, I have a page which contains a certain numbe neon-animatable pages, but after first click on button for view next page , animation don’t work, but if click on button more, animation work fine.
So, I can’t understand why first animate don’t work

If who have some mind about how resolve this problem, I will be grateful

P.S About my observations
When use in static code like this

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

Animation it is running the first time


Solution

Answered By: Anonymous

This appears fixed for a future release: https://github.com/PolymerElements/neon-animation/issues/55

Details:

I ran into the same problem and it appears related to timing on when the light DOM children are created.

Short answer: on your custom element add an attached function that sets the selected page.

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

Long Answer

When a template dom-repeat is used inside the neon-animated-pages, at the point the web component is initialized it is not able see the details of the light DOM children.

Using static code the tree is seen as:

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

Using dom-repeat at initialization it looks like:

neon-animated-pages
   - template

Because of this when the neon-animated-pages tries to set the selected page it get undefined because it is not able to see the neon-animatable components. These get created later. This behavior is described in the documentation https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html which says

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.

As the light DOM children starts getting filled in a call is made to the observer function “_updateSelected” on IronSelectableBehavior, which is the parent of NeonAnimatedPages, to update the selections based on the content updates.
However, NeonAnimatedPages also maintain internal references to identify selected items and uses the observer function “_selectedChanged” to setup references and control animations. Essentially it decides to display an animation based on whether a previous element is selected. Based on the tree above, when this method is called at initialization it cannot see the full tree and it sets previously selected to undefined. As the light DOM is getting populated, this handler is not getting called because the selected value is not changing only the content is changing. The consequence is that while IronSelectableBehavior correctly knows what is selected, NeonAnimatedPages still thinks nothing is selected, and as you make your initial screen change it treats it as an initial load because it thinks nothing is selected and suppresses the animation.

The solution essentially waits for the entire tree to be built and then sets the selected value so that all the event handlers are able to correctly see the light DOM children and set up internal references.

techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno