Modal close animation: .modal-dialog and .modal-backdrop duration stack (instead of firing simultaneously)

[mpiasta-ca]

I'm wondering if this is a feature, or unintended behavior...?

When modal is closing, first the .modal-dialog will animate-out; and only when that is complete, then the .modal-backdrop will begin animate-out. So if .modal-dialog animation duration is 300ms, and .modal-backdrop animation is 300ms, it takes 600ms for the modal to close [before the page becomes clickable again].

In contrast, when modal is opening, .modal-dialog and .modal-backdrop animate simultaneously. So if each requires duration of 300ms, the modal only requires 300ms to open.

As someone who does not like waiting, I find this to be irksome. However, if I reduce the animation-out duration to be 150ms for each, for a total of 300ms, the animation feels choppy.

[wesleycho]

Can you reproduce this in a Plunker? It would make it much easier to debug.

[mpiasta-ca]

Created a plunkr. When you click the button, it takes 3 seconds to load the modal-dialog and modal-backdrop. When you click close, first the modal-dialog takes 3 seconds to close, then the modal-backdrop takes another 3 seconds to close, for a total of 6 seconds.

[wesleycho]

Thanks for this clear reproduction - I will take a look at this possibly this weekend.

If I have this right, you would like the animation of the backdrop and the modal to happen simultaneously when the modal first appears? If so, that sounds like a reasonable request.

[mpiasta-ca]

I would like the close event for .modal-dialog and .modal-backdrop to trigger at the same time, so that if each has a close animation duration of 250ms, both will be hidden/removed after 250ms (instead of the current 500ms).

ie. while .modal-dialog is fading-out (or sliding-up), that the .modal-backdrop is simultaneously fading from opacity 0.5 to 0.0, such that both close/hide animation events end at the same time (instead of the current case, where the close/hide animation for .modal-backdrop only begins after the animation for .modal-dialog has already ended).

[mpiasta-ca]

@wesleycho works great, thanks for fixing that so quickly!