Animation finished event [Enhancement]

[fergusg]

With my app the menu frequently appear over content (visually confusing) so my workaround is to fade the main content (opacity: 20%, say) while the menu is active via main-action().

This works great for the menu open, but ideally I'd like a way to un-fade the content after the menu close animation is complete. Something like an onAnimationFinished event, perhaps (though a full suite of onMenuOpenStart/ onMenuOpenFinished/ onMenuClosedStart/ onMenuClosedFinished events would be even cooler)

Thanks for a great widget.

[nobitagit]

Hi, that might actually be an interesting enhancement.

Anyway I think that with little trickery you can already achieve what you're after and have a smooth effect. If you conditionally apply a class like fadeOut to the whole element and attach it to the menu state you can easily control the opacity of the whole menu. Moreover you can decide that when closing the menu the fading is applied only after a certain delay.

For example:

• Set the element to something like this:

<nav mfb-menu class="app-menu" menu-state="menuState" 
     ng-class="{'fadeOut' : menuState === 'closed'}">

• in your stylesheets:

.app-menu{
  opacity: 1;
  transition: opacity .9s; /* the menu fades IN at this speed */
}
.fadeOut{
  opacity: 0.3;
  transition: opacity .8s; /* the menu fades OUT this speed */
  transition-delay: .5s; /* delay fading out the menu as much as we need*/
}

I made a quick Plunkr for this. Hope this helps.

[nobitagit]

After re-reading your issue I noticed I probably got your problem mixed up. You don't want to fade the menu, but the content of the page, is that right?

Anyway, with little modification with what outlined above you can probably tackle the situation the same way. Updated Plunkr here.

Let me know if this is what you're after.

[fergusg]

Thanks for the prompt reply.

You don't want to fade the menu, but the content of the page, is that right?

Yes, absolutely. (Though I'm open to suggestions)

Let me know if this is what you're after.

Too be honest, I'm not too sure - the animation delays are too long for me to discern when the transitions start/end. That plunkr might be doing the right thing in principle, but (for example) when the menu disappears there's an awkward delay before the content unfades (this may just be CSS tweaks)

The specific thing I think I want is

a) menu open: main body content fades immediately
b) menu close: main body content fades at the end of the menu animation

But these are just my specific requirements - I think something along the lines of the onMenuXXXXX events might handle many use-cases.

Thanks, and keep up the excellent work.