Dom-repeat and neon animations in Polymer
I have the same problem using dom-repeat for neon-animatable in Polymer. So, about my problem. When I dynamically create a page, I use dom-repeat to create a specific number of pages. In code that looks 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 creating this page, I have a page that contains certain neon non-animated numbe pages, but after the first button click to view the next page, the animation doesn't work, but if the button is clicked more, the animation works fine. So, I cannot figure out why the first animat is not working.
If anyone has an opinion on how to solve this problem I would be grateful
PS About my observations When used 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>
The animation runs for the first time
source to share
This is fixed for a future release: https://github.com/PolymerElements/neon-animation/issues/55
Details:
I ran into the same issue and it seems to have to do with timing synchronization when DOM light children are created.
Short answer : on your custom element, add a connected function that sets the selected page.
attached: function () {
this.async(function () {
this.$.pages.select(0);
});
}
Long answer
When the dom-repeat template template is used inside neon-animated pages, at the time the web component is initialized, it cannot see the details of the light DOM children.
Using static code, the tree looks like this:
neon-animated-pages - neon-animatable - neon-animatable - neon-animatable
Using dom-repeat on initialization looks like this:
neon-animated-pages
- template
Because of this, when neon animated pages try to set the selected page, it gets undefined because it cannot see the neon animation components. They are 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 the initialization order can vary depending on whether the browser includes native support for web components. In particular, there are no guarantees as to initialization time between marriage elements or between parents and DOM light children. You shouldn't rely on observable times to be the same across browsers, except as noted below ... This means that light child DOM elements can be initialized before or after the parent element, and sibling elements can be prepared at any order.
As the light children of the DOM begin to fill up, a call is made to the "_updateSelected" observer function on the IronSelectableBehavior, which is the parent of the NeonAnimatedPages, to update the selected content based on updates. However, NeonAnimatedPages also maintains internal links to identify selected items and uses the "_selectedChanged" observer function to set up links and control animations. Basically, it decides to display the animation based on the selection of the previous item. Based on the tree above, when this method is called on initialization, it cannot see the full tree, and it sets the previously selected parameter to undefined. As the light DOM fills up, this handler is not called because the selected value does not change only when the content changes.The corollary of this is that IronSelectableBehavior knows correctly what is selected, NeonAnimatedPages still thinks nothing is selected, and when you do your initial screen change, it treats it as an initial load because it thinks nothing is selected or suppresses animation.
The solution essentially waits for the entire tree to be created and then sets the selected value so that all event handlers can see the light DOM children correctly and set up internal references.
source to share