Modal Dialog doesn't fade out

[daniel-dara]

Under certain circumstances, the modal dialog will simply disappear instead of fading out (even though it successfully fades in).

The example in the documentation is what it should do (fade in and out).
https://angular-ui.github.io/bootstrap/#/modal

Ironically, the plunker link it generates shows the modal not properly fading out. I've saved my own to serve as an example here:
http://plnkr.co/edit/lmFTpQtfgV6qB4AuFrXj?p=preview
[Edit from @chrisirhc to reduce confusion: Please take note that the above Plunker does not include angular-animate. As such, no animations should be seen. This is a new requirement for animations, see README.]

I have the same issue in a separate project of mine where I am handling the modal differently but have the same bug. I can provide the 2nd example if it would help but I imagine the plunker should be enough.

The bug appears to be browser independent as it occurs both when I use Chrome v42.0.2311.135 m and in the developer edition of Firefox (39.0a2).

UPDATE: Note that the plnkr is using the latest version of angular-ui (0.13.0) and the latest supported version of angular (1.3.13). This is not about angular 1.4.

[karianna]

Is this on version 0.13.0?

[daniel-dara]

Yes

[RevanProdigalKnight]

+1 I can also confirm this issue.

[rvanbaalen]

Related: #3620. Check out the discussion there about ngAnimate changes in AngularJS 1.3 causing this behavior.

[xmlking]

also conforming the same issue with 0.13.0 + angular 1.4

[jondthompson]

Does anyone have a workaround for this bug? I really need to have it fixed by next week.

[CoenWarmer]

+1

[ntrifunovic]

+1

[alo]

@jondthompson you can set animation to false so it works while fixes.

[rvanbaalen]

Like I said did anyone here confirm everything is working as its supposed to when you include ngAnimate?

[neaped]

@rvanbaalen With ngAnimate 1.40 rc.2 the modal close successfully, but the animation effect (fade out / in) won't work.

[rvanbaalen]

Please test with versions that we actually support. UI Bootstrap supports Angular 1.3 so you should test with Angular 1.3 and ngAnimate 1.3

[neaped]

@rvanbaalen UI Bootstrap with Angular 1.3 and ngAnimate 1.3 working fine :)

[rvanbaalen]

Thats what I mean. Everything else will be addressed soon when we implement Angular 1.4 compatibility (when the stable release is out).

[robertcasanova]

Hope this can help you, seems to be related to:

domEl.one('$animate:close', function closeFn() {
            $rootScope.$evalAsync(afterAnimating);
});

Seems that $animate:close is not triggered with Angular 1.4

[RobJacobs]

Comments from #3620

There is a known issue with Angular 1.4 and the Modal/Carousel directives. The ngAnimate module had some significant changes documented here that breaks how those directives are chaining animations. The area that needs to be addressed in the modal is here. . As a workaround, I changed that line from:

domEl.one('$animate:close', function closeFn() {
    $rootScope.$evalAsync(afterAnimating);
}

To:

$rootScope.$evalAsync(afterAnimating);

Keep in mind, you lose the closing animation.

[vprasanth]

Using 0.13.0 with angular 1.4 rc2, the modal dialog doesn't even appear for me. Just the dimmed backdrop. Switched back to 0.12.1 and everything is fine again.

[raphael22]

But popover-template while only works with 0.13.0 in Angular 1.4

[C00per]

I'm confused... So the only way to solve this problem is using 0.12.1 with Angular 1.4?

[raphael22]

Or config animation to false in 0.13.0
$modalProvider.options.animation = false;

[chrisirhc]

This should be fixed on master and via next release (0.13.1).

[aaaaahaaaaa]

Still experiencing the same problem with 0.13.1 and Angular 1.4.3

[raphael22]

1.4.3 & 0.13.1 here, no more problem for me. neither with popover-template.

[aaaaahaaaaa]

Double checked. I confirm the problem is there on my application with 0.13.1. Works if i rollback to 0.12.1. I'll try to investigate what could be the problem a bit later if I have the time.

[bartread]

Fixed for me too with Angular 1.4.3 and Angular-Bootstrap 0.13.1 - thanks!

[emersonmellado]

I'm using a workaround solution by turning off the animation.

$modal.open({
animation: false
}

Att,
Emerson R. Mellado

2015-07-29 12:34 GMT-03:00 aaaaahaaaaa [email protected]:

Double checked. I confirm the problem is there on my application with
0.13.1. Works if i rollback to 0.12.1. I'll try to investigate what could
be the problem a bit later if I have the time.

—
Reply to this email directly or view it on GitHub
#3633 (comment)
.

[mpiasta-ca]

Success! Doesn't work with angular 1.4.2 with angular-bootstrap 0.13.1, but when upgraded to angular 1.4.3, suddenly starts to work.

[vibrant-aaronstreate]

This appears to be working now with angular 1.4.3 and angular-bootstrap 0.13.1.

[ghost]

Confirm v1.4.3, v0.13.1

[levin81]

Using 1.43 with 0.13.1 with Bootstrap 3.3.5, fading in works but fading out doesn't work. It is due to reaching domEl.remove() in afterAnimating() too fast which removes the element before it has finished fading out.

[remscli]

I had the same issue @levin81, try to include ngAnimate module, it worked for me.

[levin81]

I have included it. I have tried messing around with different versions of Angular as well. Still doesn't work.

Edit: nevermind, forgot to add the ngAnimate to the module dependencies. Thanks.

Attached is a plunker which demonstrates it is working with the latest versions of everything.
http://plnkr.co/edit/vnNIRLeW5SvtlVO22SWh?p=preview

[ken945]

I updated angularJs 1.4.3 & angular-ui 0.13.2 from Nugget in Visual Studio 2012 yesterday,
the modal option animate is true, and no matter nganimate is included or not, modal just fade in no fade out. any workaround? I am still stocked in this animation....

[levin81]

Look at the plunker that I linked - it is barebones. Did you add 'ngAnimate' to the dependencies of your app?

[itsazzad]

not working with me with v1.4.3, v0.13.1. All links become disabled after the modal dismissal.
Disabling animation have solved the issue.
animation: false

[bhushanvaidya3]

Thanks @itsazzad . I've disabled the animation for now as well.

[gbukauskas]

Add property 'animation: false' for resolving this issue:
var modalInstance = $modal.open({
templateUrl: '...',
controller: myController,
animation: false,
size: 'lg',
resolve: {
...
}
});

[bozydar]

I debugged function removeAfterAnimate and it looks like the problem with the fade out is caused by this one: angular/angular.js#6049

Edit: updating to angular-bootstrap 0.13.3 solved the problem

[MrOutput]

+1

[Propaganistas]

As @rems69 mentioned: including ngAnimate fixed this problem for me as well.

[henriqueprj]

updating to angular-bootstrap 0.13.3 solved the problem for me too.

[Alttaf]

updating to angular-bootstrap 0.13.3 solved the problem for me too.

[arekzelechowski]

The bug still exist in my setup (ng 1.4.8). Downgrading to 0.12.1 fixes problem.