How to know when Paper components are truly done visibly initializing

[wilt...@chromium.org]

Many of the new Paper widgets have animations that run on page load. This looks nice, but how can I tell when they're finished (because, for instance, I want to do my own animation that looks bad if the widgets still look like they're loading)?

The polymer ready event fires before many of the animations are finished. Further, many of these animations are defined internally to the widgets (and rightly so), so it isn't obvious how to hook them or if it's really advisable.

My first thought was to read all animations out of document.timeline on polymer ready and wait for them to be done, but that isn't implemented yet as far as I know and it feels pretty kludgy anyway.

It seems like there should be a way to either ask an element to explicitly list if it performs a transition on load (so I can then hook animationend on that element). Then I'd need these animationend events to bubble out of the shadow root, though, because many of the Paper elements have elements inside of them with defined animation.

Better yet, it would be nice to just have an event on every high-level Paper element that said "OK I'm really (visibly) done loading now"

Right now I'm resorting to a timer, which feels lame. Any better ideas?

[Steve Orvell]

There's not a good way to do this currently. I think we need to separate this into 2 different issues: (1) knowing when an some element animation is completed, (2) animation of initial state. The first point is reasonable and the paper elements will need to evolve better support for this. Imo, animation of initial state is often not desirable. We'll need to check with the material designers to verify this is what they want.

Filed this for the first point: https://github.com/Polymer/paper-elements/issues/9

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/080f6578-91e8-419c-b9ca-e903e4f39175%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Scott Miles]

>> Imo, animation of initial state is often not desirable

+1

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZj_-YUCyankY%2B7jQCi194oNgkW9Z9P9Mr%3DSkLNxZ1-dPA%40mail.gmail.com.

[Tom Wiltzius]

On Tue, Jul 8, 2014 at 8:13 AM, Scott Miles <sjm...@google.com> wrote:

>> Imo, animation of initial state is often not desirable

+1

I tend to agree, but I just observed that this was happening so figured there should be a way to know about it.

Exposing knowing when an animation on an element is complete through some interface on the element would solve it, and seems more generally useful. The only thing I'd add is that there should also be a way to know if the element is currently animating or has a pending animation. Otherwise, in this case, I might be stuck waiting on animations that'll never happen.

[Tom Wiltzius]

While I'm at it, is there an equivalent to the document's readyState variable for the polymer-ready event? I'm running into cases where I have code that needs to wait for Polymer to be finished initializing, but that code is racing the ready event firing. It would be nice to somehow check if the state is already ready, since I might never get the event.

[Steve Orvell]

You can use Polymer.whenPolymerReady(callback). Note, the state is dynamic since elements may be imported at any time.