Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes#149 #158

Merged
merged 3 commits into from
Dec 20, 2016
Merged

Fixes#149 #158

merged 3 commits into from
Dec 20, 2016

Conversation

t-soares
Copy link
Contributor

@t-soares t-soares commented Dec 19, 2016

Fixes issue #149.

Reproduce the issue:

  1. https://jsfiddle.net/thisoares/0910ac0y/
  2. Click on the "Open Right Drawer" button. The drawer will appear from the left.
  • The drawer is opening is animated using a transition for the transform CSS property.
  • When the drawer is on the left, the transition is from transform: translateX(-100%) to transform: none when the drawer is opened;
  • When the drawer is on the right, the transition is from transform: translateX(100%) to transform: none when the drawer is opened;
  • The transition duration is 0.3s.
  • If the rightDrawer is changed before opening the drawer, a transition will start:
    • from transform: translateX(-100%) to transform: translateX(100%) if changing rightDrawer from left to right.
    • from transform: translateX(100%) to transform: translateX(-100%) if changing rightDrawer from right to left.
  • Before the previous transition ends, we open the drawer. This causes a new end to the transition started in the left step.

Solution: Disabled the drawer transition and enable it only on opening/closing the drawer.

Run the fix: https://jsfiddle.net/thisoares/rdjxmax4/
@blasten @minhlong139

Disabled the animation transition while handling rightDrawer changes.
var transition = this._transition;
this._transition = false;
this._rightDrawer = this.rightDrawer;
this._forceReflow(this.$.drawer);
Copy link
Contributor

@blasten blasten Dec 19, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is bad for performance. You can also set this._transition=transition in a requestAnimationFrame block. Also, you can check the old value of rightDrawer from _rightDrawerChanged: function(newRightDrawer, oldRightDrawer) and if it's undefined, you can can skip doing all this setup.
Thanks for taking the time to fix this issue though :)

@blasten
Copy link
Contributor

blasten commented Dec 20, 2016

@ThiSoares thanks for the update. A few tests are failing. Probably those assertions need to go inside a rAF callback.

@t-soares
Copy link
Contributor Author

t-soares commented Dec 20, 2016

I agree that it is bad for performance. I changed the proposed solution. Instead of disabling the transition when changing the rightDrawer attribute, I disabled the drawer transition and enable it only when opening/closing the drawer.
Thanks @blasten .

@blasten
Copy link
Contributor

blasten commented Dec 20, 2016

LGTM. Thanks!

@blasten blasten merged commit 5828d8c into PolymerElements:master Dec 20, 2016
@t-soares t-soares mentioned this pull request Feb 14, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants