search

googlearchive / paper-dropdown

A drop down à la Material Design
5 stars 11 forks source link

Animation flashes on second open #6

Open alan-strohm opened 9 years ago

alan-strohm commented 9 years ago

You can see it easiest on bigger dropdowns (e.g. scrolling and margin) https://www.polymer-project.org/components/paper-dropdown/demo.html

Clicking the first time causes the dropdown to smoothly animate. Clicking outside the dropdown or selecting an item in the dropdown and then toggling it again causes the expanded state to flash open, then flash close and then animate.

miuzel commented 9 years ago

It seems that this happens only in Chrome 39. Did not observed this before I upgraded Chrome from 38.

morethanreal commented 9 years ago

I think it's due to this bug: web-animations/web-animations-next#260. Also see Polymer/paper-dropdown-menu#45.

miuzel commented 9 years ago

the transitionOpened function does this.super(arguments); which gives the dropdown a core-opened class say opacity: 1 . When closing the dropdown , only this.super is executed which gives the dropdown a core-closed class say opacity: 0 (btw, I cannot find the definition of this core-closed class in core-transition). The dropdown is just hidden and not rescaled. before the openning animation goes, the dropdown is rendered and shown as if it has already be opened. I guess something like rendering sequences or triggers changed in Chrome 39?

miuzel commented 9 years ago

I tried to add a closing animation in transitionOpened which reverses the opening one and the dropdown don't flash out when reopened.

morethanreal commented 9 years ago

Should be fixed in Polymer/core-animation@ce0a08e6992f50109f5d6d5e4fa2cd65bc7726f1

ryw commented 9 years ago

I tried updating our project:

"core-animation": "Polymer/core-animation#master"

bower then brings web-animations-js 1.0.5 in as expected.

But I'm still seeing the same flash when opening the dropdown a second time within the app — in Chrome 39. :disappointed:

morethanreal commented 9 years ago

Argh, I can also reproduce in Chrome 39. Reopening.

PiotrChojniak commented 9 years ago

I think that this flash is a consequence of a delay on the 'background' div. See 'transitionOpened' (line 103).

miuzel commented 9 years ago

When the dropdown is closed, the opacity has not been set to 0. When it is being opened the hidden attribute is removed. I think this makes the dropdown appear before the animation start.

I added a fadeout animation when closing the dropdown and the dropdown didn't flash any more.

ryw commented 9 years ago

@miuzel where did you put this fadeout? really want to patch this in our app :)

RobertLowe commented 9 years ago

@miuzel yeah, how did you solve that? Mind posting a gist? @ryw oh nice to see you here. :P

ryw commented 9 years ago

Hi @RobertLowe :)

I just tested your change (removing line 103) but that didn't fix in my app — removing line 121 fixed mine... so I wonder if something in all of the delays needs addressed?

RobertLowe commented 9 years ago

@ryw Weird, because my app is based on: https://github.com/Differential/polymer-demo So I think we have similar codebases.

I didn't find the root problem, but after enough poking around, I found that solution. It's suspect that 103 works for me and 121 works for you. Can you share your bower.json perhaps? Maybe both delays should be removed? Any got some insight here?

Glad you found a solution at least!

Cheers.

miuzel commented 9 years ago

@RobertLowe @ryw
I had problem access github. Finally I managed to post a gist, I have not fully tested the work arround yet. you can try it. https://gist.github.com/miuzel/aafa266f8a85471aab65

Just fadeout every thing when closing the dropdown.