Fixes #21 by removing extra div containing ng-show which prevented the animations from working.

Author: RoopeHakulinen

README.md

@@ -73,13 +73,28 @@ myApp.controller('demoCtrl', ['Flash', function(Flash) {
 + warning
 + danger
 
-#### Methods ####
+#### Methods
 These methods are mostly for internal usage but can be used also from outside.
 
 ``` javascript
 Flash.dismiss(1);
 // Dismiss the flash with id of 1. Id is not the index of flash but instead a value returned by Flash.create()
 ```
+
+#### Animating
+You can animate the flash messages via traditional Angular way by including _ngAnimate_ as a dependency of your application and then defining the CSS transitions for different classes (_ng-enter_, _ng-move_, _ng-leave_) provided by Angular.
+
+Example:
+```
+.alert.ng-leave {
+  opacity: 1;
+  transition: opacity 1.5s ease-out;
+}
+.alert.ng-leave-active {
+  opacity: 0;
+}
+```
+
 #### [Guidelines for contributors](https://github.com/sachinchoolur/angular-flash/blob/master/contributing.md)
 
 #### Running tests

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "angular-flash-alert",
-    "version": "2.2.1",
+    "version": "2.2.2",
     "homepage": "https://github.com/sachinchoolur/angular-flash",
     "authors": [
         "Sachin N <[email protected]>"

contributing.md

@@ -13,7 +13,8 @@ Test that Grunt's CLI and Bower are installed by running `grunt --version`. If t
 
 1. Fork and clone the repo.
 1. Run `npm install` to install all build dependencies (including Grunt).
-1. Run `grunt` to grunt this project.
+1. Run `grunt` to compile the code.
+1. Run tests as described on README.md.
 
 Assuming that you don't see anything on red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken.
 

demo/stylesheets/stylesheet.css

@@ -550,3 +550,12 @@ a[disabled] {
 .listAddCont .action{
     top: 13px;
 }
+
+.alert.ng-leave {
+    opacity: 1;
+    transition: opacity 1.5s ease-out;
+}
+
+.alert.ng-leave-active {
+    opacity: 0;
+}

dist/angular-flash.js

@@ -1,6 +1,6 @@
 {
   "name": "angular-flash-alert",
-    "version": "2.2.1",
+    "version": "2.2.3",
   "description": "Flash message for AngularJS and Bootstrap",
   "keywords": [
     "angular-flash",
@@ -20,7 +20,7 @@
     "email": "[email protected]",
     "url": "https://github.com/sachinchoolur"
   },
-  "contributos": [
+    "contributors": [
     {
       "name": "Roope Hakulinen",
       "email": "[email protected]",

dist/angular-flash.js.map

@@ -48,7 +48,7 @@ app.directive('flashMessage', [
                 showClose: '=',
                 onDismiss: '&'
             },
-            template: '<div ng-show="$root.flashes.length > 0"><div role="alert" ng-repeat="flash in $root.flashes track by $index" id="{{flash.config.id}}" class="alert {{flash.config.class}} alert-{{flash.type}} alert-dismissible alertIn alertOut"><div type="button" class="close" ng-show="flash.showClose" close-flash="{{flash.id}}"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></div> <span dynamic="flash.text"></span> </div></div>',
+            template: '<div role="alert" ng-repeat="flash in $root.flashes track by $index" id="{{flash.config.id}}" class="alert {{flash.config.class}} alert-{{flash.type}} alert-dismissible alertIn alertOut"><div type="button" class="close" ng-show="flash.showClose" close-flash="{{flash.id}}"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></div> <span dynamic="flash.text"></span> </div>',
             link: function(scope, ele, attrs) {
                 Flash.setDefaultTimeout(scope.duration);
                 Flash.setShowClose(scope.showClose);