search

googlearchive / paper-tabs

A tabs à la Material Design
22 stars 21 forks source link

Click animations etc not asynchronous? #25

Closed gamebenchjake closed 9 years ago

gamebenchjake commented 9 years ago

Issue: When clicking on a paper-tab, it appears that the click event and subsequent animations are not asynchronous. This results in the paper-tab animation locking up the UI thread for a second or two, and then showing the completed transition.

Logic: Set of paper-tabs that are used to swap between panels (by hiding/showing relevant panels). The hide/show functionality has been tested with jQuery's .hide() and .show(), as well as by setting the CSS of the elements directly.

Expected: On click the paper-tab should animate the ink/selected bar movement, and show the panel at the same time.

Results: When a user clicks on the paper-tab, the UI thread locks with the ink and bar animations frozen. Stays that way for about a second to two seconds, and then the panel shows up and the paper-tab ink is gone, and the bar is in the final position (on the tab that was clicked).

Image: The below image shows the result of the lockup after clicking on the Battery tab from the CPU tab.

image

frankiefu commented 9 years ago

The problem here is the ripple animation is running on a raf loop and before the ripple animation is completed, the show/hide panel causes a rendering and blocks on the same render thread. Here is the relevant issue: https://github.com/Polymer/paper-ripple/issues/10

We are still working ways to improve the ripple animation experience. In the meantime, one way that can help on this problem is to manually delay the show/hide panel after the ripple is completed.

gamebenchjake commented 9 years ago

Frankie,

Ah - I tried searching for any report of the same thing and came up empty - thanks for the link and the tip!

tjsavage commented 9 years ago

Closing this here now - thanks Frankie!