Messages dont really disappears

[JuanHB]

I'm doing a big app for the company I work for and I'm using this module. The module works fine, the template part is good too and it's very customizable.

But when we come to the $close() function we have a problem. When you do this:

templateElement.css({'opacity' : 0}).attr('data-closing','true');

You are basicaly keeping the element in the page instead of really hidding or removing him. This may cause some problems with other elements in the same page (it was in my case).

My solution? Change the line above, to this:

templateElement.css({'display' : 'none'}).attr('data-closing','true');

By using display: none the element will disappear from the sight and don't will interfere the other elements around him.

Just FYI the problem I was having was with the close button in the top right position inside the message. When I had more than 10 messages displayed I was clicking in the button and the click area was changing, so if the user clicked in the close icon, the message didnt closed, only if he moved the mouse a little higher.

[cgross]

The messages are removed after the opacity animation (fading out) is complete. Using display:none would prevent any animation.

I don't understand what problem you're encountering. Can you reproduce the problem with the sample/demo application? What browser/version are you using?

[snrlx]

I have seen similar things happen in one of my applications:
From time to time a notification would stay inside the DOM even though its opacity had reached 0. So even though it wasn't visible to the user it was blocking parts of the UI that were behind it, in my case a pretty important navigation item.

I will try to reproduce the problem and then post it here.

[snrlx]

Ok, so as I experienced the problem myself I was able to fix it but unfortunately a Fiddle that I tried to build did not reproduce the error. Maybe I can deliver something later just to get more clarification.
Still, I think I can explain the problem. It happens when you try to close messages that haven even been layouted yet. So their opacity is already 0 before they even begin flying into the screen to reach startTop. Therefore the only transitionEnd-Event that happens for those notifications is the one when they reach their startTop-position.
I fixed it by simply checking the opacity on those transitionEnd-Events. If it is 0, we simply remove it.

I have included the fix in my pull request: #15
You can also get the version with the fix here: https://github.com/snrlx/angular-notify/

[letmein]

+1
The div's persist in DOM after the animation.

[snrlx]

Could you please try my Pull Request and tell me whether that fixes it for you?

[JuanHB]

@snrlx I used your pull request in my project and worked fine for me, I checked the element in the dev tools and he is removed from the html