Modal, not playing 'leave' javascript animation

[JonCognioDigital]

Hi,

The Modal directive appears to implement ngAnimate but the following code doesn't seem to work.

angular.module('app').animation('.modal', [function() {

    return {

        enter: function(element, doneFn) {

            console.log("entering");

            $(element).css({
                'opacity': '0', 
                'background-color': 'black'
            }).animate({
                opacity: 0.6
            }, 200, doneFn);

        },

        leave: function(element, doneFn) {

            console.log("leaving");

            $(element).animate({
                opacity: 0
            }, 200, doneFn);

        }
    }

}]);

It logs "entering" in the console when you open the modal, but when you dismiss if the element is removed from the DOM immediately and "leaving" is never output to the console.

The whole reason I am using javascript animations is because when using CSS class based animations it seems to calculate the time for removing the backdrop incorrectly so the backdrop element is still there for a while after fading. But that's a matter for another Issue :)

[icfantv]

@jon64digital, If you think you've found a bug, please follow these instructions.

[JonCognioDigital]

Ok, I haven't used plunkr before though so it may take me a while.

[JonCognioDigital]

I think I have the plunkr demo up....

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

You can see that I have javascript animations for enter and leave. The enter animation works as expected but the leave animation doesn't run and the modal is removed immediately from the DOM.

I have put two console.log() statements in there to prove that only the first function is running.

[icfantv]

The plunker looks ok. You should add the Bootstrap CSS or you will get none of the styling - this is why the modals and buttons look ruddy awful.

[JonCognioDigital]

I know it looks awful :)

I removed the bootstrap CSS because (A) it makes the plunkr much simpler and removes the possibility that something in the bootstrap CSS is causing the problem and (b) because I am not using bootstrap CSS in my project. I am using this directive becuase it is the best Angular JS Modal directive I have found, not because I am using bootstrap. I have completely restyled it in my project but stripped everything out for the test case.

When you say my plunkr looks OK, do you mean I have created it correctly, or that you don't see the bug?

[JonCognioDigital]

I just wanted to add that this issue is not connected to my other issue about closing animations on modal windows

https://github.com/angular-ui/bootstrap/issues/5407

The other seems to be a bug with transition timing, this one is a bug with javascript animation functions not being called.

Unfortunately, because of these two bugs I haven't managed to get my modals closing properly with animations as they are the only two options for triggering the animations.

[RobJacobs]

Um, some of the modal animation are transitions in the bootstrap css.

[wesleycho]

We don't animate the modal class being added/removed.

If this is a feature request to do so, we could consider it though.

[JonCognioDigital]

RobJacobs - Not sure how familiar you are with ngAnimate but it provides javascript hooks for animations too so this problem is not connected to CSS animations in any way. Clearly £ngAnimate has been intagrated by the UI-bootstrap team as the enter function I supplied is being called, it is just not calling the leave function I supplied so it looks like it has been integrated incorrectly.

[JonCognioDigital]

wesleycho - I'm not sure what you mean. Your own demos on the Angular UI Bootstrap site (which I copied from the plunkr) have animations on the modal being added and removed. The only difference is that you are using CSS classesin your demos whereas I am trying to use the Javascript functions here.

As I said to Rob above, the enter function is being run so the feature has definitely been implemented.

[icfantv]

@jon64digital, I think @RobJacobs' point was that Bootstrap CSS provides the animation and transition values and the $animateCss service manipulates those values so if you don't have that CSS, you have to provide your own and make sure they match the Bootstrap classes.

I feel compelled to point out that while a bug is a bug, this library is fully intended to be a pure angular wrapper around the Bootstrap CSS and was not extensibly designed to be used in the manner you intend, i.e. NOT using Bootstrap CSS.

[JonCognioDigital]

Hi icfantv ,

I understand that, but you guys have created the best suite of Angular components out there. I'm not sure how many hours I've saved by not having to create my own dropdown/pagination/accordian/modal components etc.

Unfortunately there isn't a library as good as this which is designed to be used without bootstrap CSS so I bet there are a hell of a lot of people out there using Angular UI and re-skinning it. It's just CSS classes at the end of the day so it shouldn't change anything. I've tried using other Angular modal components like ngDialog, but they are never as good, that one for example doesn't provide a modalStack service to keep track of windows.

Anyway, I digress. Like you say a bug is a bug and I'm just trying to help you guys by showing you what's wrong in the demo above (and hopefully find a solution to my own problem in the process).

[wesleycho]

@icfantv plenty of shops actually use UI Bootstrap and provide custom CSS around it - I have worked at a shop in the past that did so.

Ideally, the library should be as extensible as possible, and a goal in the past (but unrealized) is for the library to be Bootstrap agnostic.