CSS animation timing wrong on modal close.

[JonCognioDigital]

When closing a modal window, the ngAminate service is supposed to remove the modal (and backdrop) from the DOM once the closing animation has finished, otherwise the closing animation wouldn't have a chance to play before the element disappears.

I'm not sure how it works out the timing function for this, presumably by checking transitions that have been applied to the element in question. It seems to be doing this wrong in the modal directive though because if I use a 1 second transition for the close animation then the backdrop stays in the DOM much longer than it is supposed to and everything on the screen is un-clickable because the backdrop is still there. I have created a plunkr here

http://plnkr.co/edit/c38RBk?p=preview

If you open the modal then close it again you will see that it fades to 0.1 opacity but then stays in the DOM for a while before being removed.

[icfantv]

@jon64digital is this related to your other issue, #5399? If so, please do not open duplicate issues. Managing them is very time-consuming and hard enough.

[JonCognioDigital]

Hi icfantv,

No it is not the same issue and the Plunkrs are different.

I have tried to get a smooth closing animation using both CSS classes and javascript animations and I believe I have run into two different bugs. The CSS class issue here causes a delay before the backdrop is removed from the DOM, my other issue is about javascript animations not being fired at all when the modal is closed.

Is it possible that the two issues are related under the hood? It's possible but I doubt it.

It seems to me like the integration with the $animate service in UI bootstrap Modal has many flaws, but I may be wrong, it may just be me doing something wrong but I have provided very simple demos so that seems unlikely.

[JonCognioDigital]

It's worth pointing out that the same thing happens in your own demo here...

https://angular-ui.github.io/bootstrap/#/modal

If you have the developer console open when you close the window you'll see that the backdrop fades quickly and then there's a short wait before it is removed from the DOM. It's very quick though so you hardly notice it.

The longer the fade transition the longer the time it takes to remove the backdrop from the DOM. If the fade is 0.2 seconds it seems to take about 0.4s before the backdrop is removed. If you make the fade last 1 second then it takes about 2 seconds before the backdrop is removed from the DOM. So the backdrop stays on screen for a second longer than it is supposed to, making the UI unresponsive for that time.

I think this is a clue to what is going wrong. $ngAnimate must be calculating under the hood how long to wait before removing something from the DOM. My guess is that it is looking for transitions and finding the longest timing function it can to make sure it's waiting until all animations have finished playing before removing from the DOM. If this calculation is wrong then the bug will happen. The fact that it always seems to be twice as long as it should be is maybe a clue to what's happening. Maybe it's adding up nested transitions and ending up with a much longer wait?

That's just an idea, I don't really know how it works under the hood, just that it's waiting about twice as long as it's supposed to before removing the backdrop after the CSS transition has finished.

[JonCognioDigital]

For anybody having the same trouble, I opened a bounty on bountysource for this and a developer suggested a workaround.

Just set "pointer-events:none;" on the window and the backdrop as soon as the leave animation starts.

This is not a fix as the backdrop still takes too long to get removed from the DOM but in most browsers it at least stops it getting in the way of the UI while we wait for it to be removed.

[gegham-khachatryan]

Animation with keyframes working good more than transition. After animation modal is removed form DOM immediately.
http://plnkr.co/edit/hzt3DV

[JonCognioDigital]

Thanks Gegham, that seems to be another good workaround.

Personally I still hope the original issue can be fixed so won't close this myself but would understand if it was closed by a maintainer if it's not considered a priority.

[jvdvleuten]

+1 can confirm this.

Also, when using animating = false the backdrop gets removed before the modal. Just uncheck the animation toggle in https://angular-ui.github.io/bootstrap/#/modal and close a modal to see this behaviour (is more noticeable on iPads/iPhone or slower devices).

[wesleycho]

There is something definitely wrong with modal animations - I encountered an issue here myself a few months ago when I was trying to create some custom transition CSS at work, but I haven't had the time to debug this properly.