Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit e8f55ad

Browse files
matskomatsko
committed
wip
1 parent fb0f923 commit e8f55ad

File tree

5 files changed

+177
-0
lines changed

5 files changed

+177
-0
lines changed

‎example.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html ng-app="Animate">
3+
<head>
4+
<style>
5+
.record {
6+
transition:0.5s linear all;
7+
}
8+
.record.ng-enter {
9+
opacity:0;
10+
}
11+
.record.ng-enter.ng-enter-active {
12+
opacity:1;
13+
}
14+
.record.ng-leave-active {
15+
opacity:0;
16+
}
17+
.record.ng-enter-stagger, .record.ng-leave-stagger {
18+
transition-delay:0.05s;
19+
transition-duration:0;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<button ng-click="set()">Set Items</button>
25+
<button ng-click="clear()">Clear Items</button>
26+
|
27+
<button ng-click="add()">Add New Item</button>
28+
<button ng-click="remove()">Remove Item</button>
29+
<hr />
30+
<div ng-repeat="item in items" class="record">
31+
{{ item }}
32+
</div>
33+
</body>
34+
35+
<script type="text/javascript" src="./build/angular.js"></script>
36+
<script type="text/javascript" src="./build/angular-animate.js"></script>
37+
<script>
38+
angular.module('Animate', ['ngAnimate'])
39+
.run(function($rootScope) {
40+
$rootScope.items = [];
41+
$rootScope.clear = function() {
42+
$rootScope.items.length = 0;
43+
};
44+
$rootScope.set = function() {
45+
$rootScope.items = [0,1,2,3,4,5,6,7,8,9];
46+
};
47+
$rootScope.remove = function() {
48+
$rootScope.items.pop();
49+
};
50+
$rootScope.add = function() {
51+
$rootScope.items.push($rootScope.items.length);
52+
};
53+
});
54+
</script>
55+
</html>

‎example2.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html ng-app="Animate">
3+
<head>
4+
<style>
5+
.box {
6+
width:500px;
7+
height:300px;
8+
border:2px solid black;
9+
transition:3s linear all;
10+
}
11+
.red { background:red; }
12+
.blue { background:blue; }
13+
.green-add { background:orange; }
14+
.green { background:green; }
15+
.silver-add { background:silver; }
16+
.silver-add-active { background:#222; }
17+
.resize-add { height:100px; }
18+
.resize { width:800px; height:800px; transition:5s linear all; }
19+
</style>
20+
</head>
21+
<body>
22+
<button ng-click="className(klass='red')">Red</button>
23+
<button ng-click="className(klass='blue')">Blue</button>
24+
<button ng-click="className(klass='green')">Green</button>
25+
<button ng-click="className(klass='silver')">Silver</button>
26+
<button ng-click="resize()">Resize</button>
27+
<hr />
28+
{{ className() }}
29+
<div class="box" ng-class="className()">
30+
lorem
31+
</div>
32+
</body>
33+
34+
<script type="text/javascript" src="./build/angular.js"></script>
35+
<script type="text/javascript" src="./build/angular-animate.js"></script>
36+
<script>
37+
angular.module('Animate', ['ngAnimate'])
38+
.run(function($rootScope) {
39+
var klass;
40+
var resize;
41+
$rootScope.resize = function() {
42+
resize = !resize;
43+
}
44+
$rootScope.className = function(val) {
45+
if (arguments.length) {
46+
klass = val;
47+
}
48+
return [klass, resize ? 'resize' : null].join(' ');
49+
}
50+
});
51+
</script>
52+
</html>

‎example3.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html ng-app="Animate">
3+
<head>
4+
<style>
5+
.box {
6+
width:400px;
7+
height:300px;
8+
border:2px solid black;
9+
transition:2s linear all;
10+
}
11+
.box.ng-enter { width:0; }
12+
.box.ng-enter.ng-enter-active { width:400px; }
13+
.box.ng-leave.ng-leave-active { width:0; }
14+
</style>
15+
</head>
16+
<body>
17+
<button ng-click="on=true">On</button>
18+
<button ng-click="on=false">Off</button>
19+
<hr />
20+
<div class="box" ng-if="on">
21+
</div>
22+
</body>
23+
24+
<script type="text/javascript" src="./build/angular.js"></script>
25+
<script type="text/javascript" src="./build/angular-animate.js"></script>
26+
<script>
27+
angular.module('Animate', ['ngAnimate'])
28+
.run(function($rootScope) {
29+
var klass;
30+
var resize;
31+
$rootScope.resize = function() {
32+
resize = !resize;
33+
}
34+
$rootScope.className = function(val) {
35+
if (arguments.length) {
36+
klass = val;
37+
}
38+
return [klass, resize ? 'resize' : null].join(' ');
39+
}
40+
});
41+
</script>
42+
</html>

‎src/ng/animate.js

+4
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,10 @@ var $$CoreAnimateQueueProvider = function() {
135135
};
136136

137137
function addRemoveClassesPostDigest(element, add, remove) {
138+
var classes = $$animateClassResolver(element.attr('class'),
139+
data.addClass,
140+
data.removeClass);
141+
138142
var data = postDigestQueue.get(element);
139143
var classVal;
140144

‎test/ng/animateSpec.js

+24
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,30 @@ describe("$animate", function() {
177177
expect(style.color).toBe('green');
178178
expect(style.borderColor).toBe('purple');
179179
}));
180+
181+
iit("should avoid cancelling out add/remove when the element already contains the class",
182+
inject(function($animate, $rootScope) {
183+
184+
var element = jqLite('<div class="ng-hide"></div>');
185+
186+
$animate.addClass(element, 'ng-hide');
187+
$animate.removeClass(element, 'ng-hide');
188+
$rootScope.$digest();
189+
190+
expect(element).not.toHaveClass('ng-hide');
191+
}));
192+
193+
iit("should avoid cancelling out remove/add if the element does not contain the class",
194+
inject(function($animate, $rootScope) {
195+
196+
var element = jqLite('<div></div>');
197+
198+
$animate.removeClass(element, 'ng-hide');
199+
$animate.addClass(element, 'ng-hide');
200+
$rootScope.$digest();
201+
202+
expect(element).toHaveClass('ng-hide');
203+
}));
180204
});
181205

182206
describe('CSS class DOM manipulation', function() {

0 commit comments

Comments
 (0)