fix backdrop out animation

[miguelcobain]

Currently the backdrop disappears instantly instead of fading out animation

[alexlafroscia]

Do you have an example of what you'd like this to look like instead? I would love to help fix this.

[miguelcobain]

The main problem is here: https://github.com/miguelcobain/ember-paper/blob/master/app/templates/components/paper-nav-container.hbs#L2

When the sidenav is closed, open is set to false and the backdrop is immediately removed from DOM. We need to give some time for the backdrop to fade out before removing it.

Two solutions came to mind:

• Perhaps using a transitionEnd event or something.
• Maybe the backdrop could always stay there but we get it "out of the way" with some styling trick
  Not really sure the best way to do this. :/

The angular material website is an example of a correct fade out animation: https://material.angularjs.org/
(don't forget to enter the open/close mode by resizing the viewport)

[alexlafroscia]

Alright cool, I'm coming up on Spring Break next week and will see if I can get a PR together for this 😄

[alexlafroscia]

I'm reading through the code and trying to understand it. What does the backdrop do? And where is the resizing of the browser listened for?

[miguelcobain]

Backdrop is the dark transparent element that covers the content when the sidenav is open (in open/close mode).
The resizing behaviour is entirely defined using css media queries.

[alexlafroscia]

Oh, I see. Thanks!