Modal Dialog doesn't fade out
daniel-dara opened this issue · 96 comments
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.
Is this on version 0.13.0?
Yes
+1 I can also confirm this issue.
Related: #3620. Check out the discussion there about ngAnimate changes in AngularJS 1.3 causing this behavior.
also conforming the same issue with 0.13.0 + angular 1.4
Does anyone have a workaround for this bug? I really need to have it fixed by next week.
+1
+1
@jondthompson you can set animation to false so it works while fixes.
Like I said did anyone here confirm everything is working as its supposed to when you include ngAnimate?
@rvanbaalen With ngAnimate 1.40 rc.2 the modal close successfully, but the animation effect (fade out / in) won't work.
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
@rvanbaalen UI Bootstrap with Angular 1.3 and ngAnimate 1.3 working fine :)
Thats what I mean. Everything else will be addressed soon when we implement Angular 1.4 compatibility (when the stable release is out).
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
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.
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.
Yay, I think angular 1.4.0 was released tonight :). When I close a dialog, the dialog disappears but the backdrop is still there.
@SlippySken I don't see the release on the official website, it is still on RC2. However, you can fix the issue as @RobJacobs mention. I did it in my code, and it is working now
I was looking at https://github.com/angular/angular.js/releases. It seems that the official website isn't updated yet.
But the workaround is working :). Thanks :)
@vprasanth @SlippySken We dont officially support Angular 1.4 yet. UI Bootstrap 0.13.0 has full Angular 1.3 support however.
+1
+1. Angular 1.4.0 must be out of beta as bower took it down. I get the modal, and it closes, but then I am left with the modal backdrop. I switched back to 0.12.1 and it works great again.
@ecsplendid We still don't support Angular 1.4 whether bower wants it or not. The official way to verify stable releases is going to www.angularjs.org and see what versions they are offering. Currently, AngularJS 1.4 is in a release candidate state.
Based on this comment up here, I'm closing this issue. Someone can start a new issue that is specifically meant for Angular 1.4 support.
Including the corresponding version of ngAnimate and including it in the module does fix the issue. However I don't see this dependency documented anywhere on UI Bootstrap.
If we are supposed to include ngAnimate in order to get UI Bootstrap to fully function, then at a minimum the dependency needs to be added to both the Plunkr and the documentation I linked to. Oddly enough, this doesn't explain how the live example in the documentation, which does not include ngAnimate, is still working. I am also of the opinion that the "Dependencies" section at the top of the git hub page needs to specify ngAnimate as module dependency in angular.
@Danielsd I agree with you. The documentation needs an update and the dependency definition of the bower project needs that as well. If I'm not mistaken @RobJacobs fixed the dependency recently. If so, that will be tackled as soon as the next release lands.
Since all code (including the docs) is open source, please feel free to help us out on that one and send a PR that includes a better documentation regarding the dependencies.
The plunkers need to be updated by @Foxandxss if I'm not mistaken.
By the way:
If we are supposed to include ngAnimate in order to get UI Bootstrap to fully function, then at a minimum the dependency needs to be added to both the Plunkr and the documentation I linked to
ngAnimate is NOT required as a dependency. UI Bootstrap is fully functioning without it. ngAnimate only adds optional eye candy with animations. At least, that's how things are supposed to work.
Angular 1.4.0 has been released
animation: false is workaround for me.
👍 on this issue. I'm going like this for now to globally fix it:
angular.module('MY_MODULE_NAME').config(function($modalProvider) {
$modalProvider.options.animation = false;
});
Is there any update on this? Don't really want to have to turn animations off if possible.
I noticed this issue is labled with Angular 1.4 tag. The update in the top comment said it is for angular 1.3. I also have the issue on Angular 1.3.
I said this:
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
And @neaped replied:
UI Bootstrap with Angular 1.3 and ngAnimate 1.3 working fine :)
That's why it has a AngularJS 1.4 label. If you're experiencing this issue in 1.3 with UI Bootstrap 0.13, please create a plunkr that demonstrates your problem.
It originally started out as an Angular 1.3 issue due to the sudden inclusion of the ngAnimate dependency, but people latched on top the Angular 1.4 issue because the ticket title didn't specify a version. The 1.4 stuff really should be in its own ticket and this one should be closed, but... shrugs
FWIW: As much as I'd hate to have to call this simple function for every modal I'd use, this does work and keeps animations:
$('div.modal').removeClass('fade').addClass('hidden');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
Another workaround:
instance = $modal.open(options)
promise = instance.result
promise.finally ->
$timeout ->
$('.modal:last').trigger('$animate:close')
$timeout ->
$('.modal-backdrop:last').trigger('$animate:close')it doesn't show closing animation but it's not too hard to add.
@pgkehle, @elado should probably note that both of your solutions require jQuery.
One of the main aims of UI Bootstrap is to prevent the need of jQuery in your project. So that kind of defeats the purpose 😉
+1 can confirm no fadeout in OP's plunker which uses 1.3.13.
Hi,
Do you know when an update will be available?
Thank you for your work :)
👍, same issues, waiting for 0.14.0.
+1
Take a look on https://docs.angularjs.org/guide/migration "Migrating from 1.3 to 1.4"
Animation-related callbacks are now fired on $animate.on instead of directly being on the element.
// < 1.4
element.on('$animate:before', function(e, data) {
if (data.event === 'enter') { ... }
});
element.off('$animate:before', fn);
// 1.4+
$animate.on(element, 'enter', function(data) {
//...
});
$animate.off(element, 'enter', fn);The function params for $animate.enabled() when an element is used are now flipped. This fix allows the function to act as a getter when a single element param is provided.
// < 1.4
$animate.enabled(false, element);
// 1.4+
$animate.enabled(element, false);In addition to disabling the children of the element, $animate.enabled(element, false) will now also disable animations on the element itself.
There is no need to call $scope.$apply or $scope.$digest inside of a animation promise callback anymore since the promise is resolved within a digest automatically. (Not to worry, any extra digests will not be run unless the promise is used.)
// < 1.4
$animate.enter(element).then(function() {
$scope.$apply(function() {
$scope.explode = true;
});
});
// 1.4+
$animate.enter(element).then(function() {
$scope.explode = true;
});When an enter, leave or move animation is triggered then it will always end any pending or active parent class based animations (animations triggered via ngClass) in order to ensure that any CSS styles are resolved in time.
+1 Thanks @LeonanCarvalho for the information
Any fix for this rather than setting
animation: falseI also have this issue with angular 1.3. Modals open, but will not close. I have been able to get around this by disabling animations globally, however this is not desirable.
I am confused though, I have seen animations working on Plunker with 1.3 and 0.13.0, however there seems to be a good portion of people who are seeing this issue. It seems that something else is involved.
I'm experiencing the same issue with angular 1.3.15, angular-animate 1.3.15, and ui-bootstrap 0.13.0. I am unable to close a modal after opening it.
What about just CSS animation? 👍
@311chaos @astreate I've no problem with backdrop on angular 1.3 since it requires ngAnimate.
Here is the plnkr http://plnkr.co/edit/zHEHNTI1Yps7UBh9Cze9?p=preview
+1 @astreate . Also unable to close modal with those same versions in project, but tested it in plnkr and there everything was ok.
Hi, I've started a PR. there are still things hardcoded but it works. Any reviews would be appreciated : iamdey#1 this include a demo
I have the same issue, 0.13 with angular 1.4 does not work
This is what I am using as a workaround on angular 1.4.1 and angular bootstrap 0.13.0
<div class="modal-footer">
<button class="btn btn-primary"
ng-click="registerModal.ok()"
remove-modal>OK</button>
<button class="btn btn-warning"
ng-click="registerModal.cancel()"
remove-modal>Cancel</button>
</div>
/*global angular */
(function () {
'use strict';
angular.module('CorvetteClub.removemodal.directive', [])
.directive('removeModal', ['$document', function ($document) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function () {
$document[0].body.classList.remove('modal-open');
angular.element($document[0].getElementsByClassName('modal-backdrop')).remove();
angular.element($document[0].getElementsByClassName('modal')).remove();
});
}
};
}]);
}());
Note that the original bug/issue (from the original poster) here is actually that the modal initially fades in when it should instead skip the animation since ngAnimate module wasn't included.
@chrisirhc No, the original issue was that the modal would fade in correctly but would skip the fade out animation and just disappear.
That's incorrect. If angular-animate isn't included, the expected behavior is that there will be no animations at all. Disappearing is the expected behavior. Fading in is actually the bug. You need angular-animate for animations, that's the change when upgrading to 0.13 .
Perhaps it would be less confusing to log a warning if ngAnimate isn't available and animations are enabled on the modal.
Read the first sentence in the OP
"Under certain circumstances, the modal dialog will simply disappear instead of fading out (even though it successfully fades in)."
Yes, successfully fading in is the wrong behavior. Please take careful note that the Plunker does not include ngAnimate (angular-animate.js)
That's not what is being discussed at all. The entire gist of the thread from the original OP to the very end has been a series of workarounds to determine how to keep the animations but also not include breaking changes by doing so.
I'm not trying to turn this into an argument but incorrectly stating the issue does nothing to help resolve it.
The first thing you need for animations is angular-animate . If it isn't included, the discussion is on the wrong track. @tuckerjt07 , I don't think your issue is the same as the above. All I'm saying is that the OP's plunker is invalid for discussion and confusing to people who are new to the thread.
If you're experiencing issues with modal animations on Angular 1.4 . Please see #3895
Correct, and that was mentioned, and resolved, early on in the thread, but was never the issue of the OP. Now the issue is that with the changes made to ngAnimate the actions provided by $modal and $modalInstance are not firing the necessary functions to remove all of the classes provided by $modal. In my case it made the entire screen disabled irregardless of if there was a mask or not.
The issue has nothing to do with inclusion at this point. Now what needs to be done is that the code needs to be updated to work with ngAnimate in its newer state. Until then a workaround is what will need to be used and has been provided.
Please see if #3895 resolves your issue. Otherwise, please open another issue for that discussion.
The reason for this is so that the issue doesn't get lost in the haystack. If the discussion is no longer about the original issue, it will be missed by the maintainer.
Unfortunately, as a maintainer, I have limited amount of time to go through issues every day and unable to go through every single message or track down every fork in the discussion.
I think the fact that the original issue was resolved is good reason to close this. This issue in its current state only serves to confuse others.
This thread needs to be forked into a completely new issue about five posts from the top if the focus is going to be put on inclusion as most of the discussion is not pertinent in that vein.
Edit: Please see thread 3620 where it was closed because this thread was considered more pertinent. I will open a new issue and place the link for it here.
👍
Can this fix be rolled out to bower asap please?
+1
@dyatchenko Thanks, works for me
BRAVO. Thanks for the speedy fix!
+1 @dyatchenko
Thanks @dyatchenko
Version 0.12.1 also works fine using latest Angular (1.4.1)
@rsfurlan90 yes, this is the paradox...
For me, all seems working fine in 0.12.1 with Angular 1.4.x
But popover-template while only works with 0.13.0 in Angular 1.4
I'm confused... So the only way to solve this problem is using 0.12.1 with Angular 1.4?
Or config animation to false in 0.13.0
$modalProvider.options.animation = false;
This should be fixed on master and via next release (0.13.1).
Still experiencing the same problem with 0.13.1 and Angular 1.4.3
1.4.3 & 0.13.1 here, no more problem for me. neither with popover-template.
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.
Fixed for me too with Angular 1.4.3 and Angular-Bootstrap 0.13.1 - thanks!
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 notifications@github.com:
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)
.
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.
This appears to be working now with angular 1.4.3 and angular-bootstrap 0.13.1.
Confirm v1.4.3, v0.13.1
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.
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
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....
Look at the plunker that I linked - it is barebones. Did you add 'ngAnimate' to the dependencies of your app?
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
Thanks @itsazzad . I've disabled the animation for now as well.
Add property 'animation: false' for resolving this issue:
var modalInstance = $modal.open({
templateUrl: '...',
controller: myController,
animation: false,
size: 'lg',
resolve: {
...
}
});
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
+1
As @rems69 mentioned: including ngAnimate fixed this problem for me as well.
updating to angular-bootstrap 0.13.3 solved the problem for me too.
updating to angular-bootstrap 0.13.3 solved the problem for me too.
The bug still exist in my setup (ng 1.4.8). Downgrading to 0.12.1 fixes problem.