[neon-animated-pages] dynamically added pages cause initial rendering/animation issues

[hawkett]

JSBin demonstrating the issue (demo will only work if you click the items in order, first to last)

Clicking through the paper-menu's items creates the required pages if they don't already exist.

• Selection/Creation of the first page works fine.
• Second and third selected pages throw an exception (shown below)
• Once they're all created, clicking through them in order again clears everything up and things start working as expected.

Uncaught TypeError: Cannot read property 'classList' of undefined
runner-3.35.3.min.js:1 error TypeError: Cannot read property 'classList' of undefined
    at neon-animated-pages.Polymer._selectedChanged (http://polygit.org/components/neon-animation/neon-animated-pages.html:161:19)
    at neon-animated-pages.Polymer.Base.extend._complexObserverEffect (http://polygit.org/components/polymer/polymer.html:1567:4)
    at neon-animated-pages.<anonymous> (http://polygit.org/components/polymer/polymer.html:1411:4)
    at Array.forEach (native)
    at neon-animated-pages.Polymer.Bind._modelApi._effectEffects (http://polygit.org/components/polymer/polymer.html:1408:9)
    at neon-animated-pages.Polymer.Bind._modelApi._propertySetter (http://polygit.org/components/polymer/polymer.html:1393:6)
    at neon-animated-pages.setter (http://polygit.org/components/polymer/polymer.html:1469:6)
    at neon-animated-pages.Polymer.IronSelectableBehavior.select (http://polygit.org/components/iron-selector/iron-selectable.html:179:21)
    at x-example.Polymer._selectedChanged (http://null.jsbin.com/runner:23:29)
    at x-example.Polymer.Base.extend._complexObserverEffect (http://polygit.org/components/polymer/polymer.html:1567:4)

This seems a fairly common use case for a reasonably sized app, since creating all the app's page elements up front (which may often include server hits) is far too expensive.

[Vermat99]

+1!

[hawkett]

Hi Guys - would really appreciate if someone on the team can comment on whether I should be expecting this to work. At the moment this prevents the use of animated-pages for my project, which from a user experience perspective is a sad loss.

If this use case isn't supported, I'll at least be able to think about a different architecture/solution to keep up to date with polymer and still use animations.

There's a JSBin in the OP - let me know if you need anything else - thx!

[hawkett]

Reverting to iron-selector#1.0.7 appears to resolve this issue.

Possibly related to https://github.com/Polymer/polymer/issues/2734 - @cdata, in that issue you were looking for an example of where iron-selector#1.0.8 broke an app, and an issue to follow. Perhaps this is that issue?

[cdata]

@hawkett thanks for taking the time to write up such a nice issue. Taking a look.

[hawkett]

Checking in to see how this is going...

Is it reasonable to assume that issues in iron-selector#1.0.8 are well known, and that work to resolve them would include a fix for this issue? Is there an issue open to consolidate/track the iron-selector problems and resolution?

[cdata]

iron-selector had a wave of migration pains, it is true, but AFAIK the majority of them have been resolved. I will take a look at this issue today.

There is no central tracking issue right now (that I am aware of), but it sounds like a good thing that should exist :)

On Wed, Jan 27, 2016, 3:58 AM hawkett notifications@github.com wrote:

Checking in to see how this is going?

Is it reasonable to assume that issues in iron-selector#1.0.8 [are well known],(Polymer/polymer#2734 (comment) https://github.com/Polymer/polymer/issues/2734#issuecomment-157213117) and that work to resolve them would include a fix for this issue? Is there an issue open to consolidate/track the iron-selector problems and resolution?

— Reply to this email directly or view it on GitHub https://github.com/PolymerElements/neon-animation/issues/100#issuecomment-175583090 .

[govis]

I have just dealt with a similar issue - trying to animate dynamically added element. It looks like if you wait until the new element is attached before running the animation it works fine. Not sure if the attached callback can be tapped into externally without raising a custom event to trigger the animation.

[roelvanhoof]

@govis I am still having issues with this, can you show me an example of how to wait for the dynmically loaded element to be attached before running the animation?

[govis]

It's pretty simple - fire an event of your choosing from the element's ready callback and have the AnimationRunner listen for it and trigger the animation upon receiving. Hope this helps.