Skip to content

Commit 85c08b0

Browse files
author
Marco Rinck
committed
implement css animations, working on marcorinck#3 
1 parent 891d5c8 commit 85c08b0

File tree

5 files changed

+65
-5
lines changed

5 files changed

+65
-5
lines changed

‎README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,45 @@ app.controller("demoCtrl", ['$scope', 'growl', function($scope, growl) {
127127
}
128128
}]);
129129
````
130+
131+
###Animations
132+
133+
Beginning with angularJS 1.2 growl messages can be automatically animated with CSS animations when adding and/or closing
134+
them. All you have to do is add **ngAnimate** to your applications dependency list (and load the angular-animate.js provided
135+
by angularJS):
136+
137+
````html
138+
<html>
139+
<head>
140+
<link href="bootstrap.min.css" rel="stylesheet">
141+
<script src="angular.min.js"></script>
142+
<script src="angular-animate.min.js"></script>
143+
144+
<link href="angular-growl.css" rel="stylesheet">
145+
<script src="angular-growl.js"></script>
146+
</head>
147+
</html>
148+
````
149+
150+
````javascript
151+
var app = angular.module('myApp', ['angular-growl', 'ngAnimate']);
152+
````
153+
154+
That's it. The angular-growl.css comes with a pre-defined animation of 0.5s to opacity.
155+
156+
To configure the animations, just change the **growl-item.* ** classes in the css file to your preference. F.i. to change length
157+
of animation from 0.5s to 1s do this:
158+
159+
````css
160+
.growl-item.ng-enter,
161+
.growl-item.ng-leave {
162+
-webkit-transition:1s linear all;
163+
-moz-transition:1s linear all;
164+
-o-transition:1s linear all;
165+
transition:1s linear all;
166+
}
167+
````
168+
130169
###Handling of server sent notifications
131170

132171
When doing $http requests, you can configure angular-growl to look automatically for messages in $http responses, so your

‎demo/demo.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@
22
<html>
33
<head>
44
<title>angular-growl demo</title>
5-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
5+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
6+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"></script>
67
<link href="//netdna.bootstrapcdn.com//twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
7-
<link href="../build/angular-growl.css" rel="stylesheet">
8-
<script src="../build/angular-growl.js"></script>
8+
<link href="../src/growl.css" rel="stylesheet">
9+
<!--<script src="../build/angular-growl.js"></script>-->
10+
<script src="../src/growl.js"></script>
11+
<script src="../src/growlDirective.js"></script>
12+
<script src="../src/growlFactory.js"></script>
913
<script src="demo.js"></script>
1014
</head>
1115
<body ng-app="demo">

‎demo/demo.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
var app = angular.module("demo", ["angular-growl"]);
1+
var app = angular.module("demo", ["angular-growl", "ngAnimate"]);
22

33
app.config(["growlProvider", "$httpProvider", function(growlProvider, $httpProvider) {
44
console.log(growlProvider);

‎src/growl.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,21 @@
44
right: 10px;
55
float: right;
66
width: 250px;
7+
}
8+
9+
.growl-item.ng-enter,
10+
.growl-item.ng-leave {
11+
-webkit-transition:0.5s linear all;
12+
-moz-transition:0.5s linear all;
13+
-o-transition:0.5s linear all;
14+
transition:0.5s linear all;
15+
}
16+
17+
.growl-item.ng-enter,
18+
.growl-item.ng-leave.ng-leave-active {
19+
opacity:0;
20+
}
21+
.growl-item.ng-leave,
22+
.growl-item.ng-enter.ng-enter-active {
23+
opacity:1;
724
}

‎src/growlDirective.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ angular.module("angular-growl").directive("growl", ["$rootScope", function ($roo
44
return {
55
restrict: 'A',
66
template: '<div class="growl" ng-show="showMessages()">' +
7-
' <div class="alert" ng-repeat="message in messages" ng-class="computeClasses(message)">' +
7+
' <div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">' +
88
' <button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>' +
99
' {{ message.text}}' +
1010
' </div>' +

0 commit comments

Comments
 (0)