I've been working on developing an Angular service that can dynamically append a notification box to the DOM and display it without the need to manually add HTML code or write show/hide logic.
This service, named $notify, can be used as follows:
$notify.error( "this is an error", {position: "bottom-left"} );
The service leverages angular.element to construct the notification box and insert it into the DOM. While this functionality is functioning properly, I've encountered an issue when trying to implement animations using ngAnimate and animate.css. When I manually insert the notification HTML code into my page, the animations work flawlessly. However, when the code is dynamically added via the service, the animations do not apply. I'm wondering whether elements need to be present in the DOM at document load for ngAnimate to work correctly. Despite confirming that the Angular service is functioning and inserting the HTML code as intended, the animations are not being triggered. See below for the HTML and CSS code snippets:
HTML:
<div class="simple-notify simple-notify-top-left simple-notify-info" ng-if="toggle">
<simple-notify-header>Hello!<span class='simple-notify-dismiss pull-right' ng-click='doSomething()'>×</span></simple-notify-header>
<simple-notify-body>Some bogus text here!</simple-notify-body>
</div>
CSS/LESS:
.simple-notify {
&.ng-enter {
display:none;
animation: @animate-enter @animation-length;
-webkit-animation: @animate-enter @animation-length;
}
&.ng-enter-active {
display:block;
}
&.ng-leave {
animation: @animate-leave @animation-length;
-webkit-animation: @animate-leave @animation-length;
}
}
Any insights or suggestions would be greatly appreciated! Thank you!