Animation flashes on second open

[alan-strohm]

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]

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

[morethanreal]

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

[miuzel]

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]

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

[morethanreal]

Should be fixed in googlearchive/core-animation@ce0a08e

[ryw]

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. 😞

[morethanreal]

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

[PiotrChojniak]

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

[miuzel]

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]

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