Skip to content

Commit 5a36e77

Browse files
codelogicmhevery
codelogic
authored and
mhevery
committed
feat(Animation): Animation for AngularDart.
Closes dart-archive#635
1 parent 59d6659 commit 5a36e77

39 files changed

+2203
-86
lines changed

‎demo/animate_demo/pubspec.lock

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# Generated by pub
2+
# See http://pub.dartlang.org/doc/glossary.html#lockfile
3+
packages:
4+
analyzer:
5+
description: analyzer
6+
source: hosted
7+
version: "0.10.5"
8+
angular:
9+
description:
10+
path: "../.."
11+
relative: true
12+
source: path
13+
version: "0.9.7"
14+
args:
15+
description: args
16+
source: hosted
17+
version: "0.9.0"
18+
browser:
19+
description: browser
20+
source: hosted
21+
version: "0.9.1"
22+
collection:
23+
description: collection
24+
source: hosted
25+
version: "0.9.1"
26+
di:
27+
description: di
28+
source: hosted
29+
version: "0.0.32"
30+
html5lib:
31+
description: html5lib
32+
source: hosted
33+
version: "0.9.1"
34+
intl:
35+
description: intl
36+
source: hosted
37+
version: "0.9.1"
38+
logging:
39+
description: logging
40+
source: hosted
41+
version: "0.9.1+1"
42+
path:
43+
description: path
44+
source: hosted
45+
version: "1.0.0"
46+
perf_api:
47+
description: perf_api
48+
source: hosted
49+
version: "0.0.8"
50+
route_hierarchical:
51+
description: route_hierarchical
52+
source: hosted
53+
version: "0.4.14"
54+
shadow_dom:
55+
description: shadow_dom
56+
source: hosted
57+
version: "0.9.2"
58+
source_maps:
59+
description: source_maps
60+
source: hosted
61+
version: "0.9.0"
62+
stack_trace:
63+
description: stack_trace
64+
source: hosted
65+
version: "0.9.1"
66+
unittest:
67+
description: unittest
68+
source: hosted
69+
version: "0.10.0"
70+
unmodifiable_collection:
71+
description: unmodifiable_collection
72+
source: hosted
73+
version: "0.9.2+1"
74+
utf:
75+
description: utf
76+
source: hosted
77+
version: "0.9.0"

‎demo/animate_demo/pubspec.yaml

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
name: angular_animate_demo
2+
version: 0.0.1
3+
dependencies:
4+
angular:
5+
path: ../..
6+
browser: any
7+
unittest: any

‎demo/animate_demo/web/animate_demo.dart

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
library animate_demo;
2+
3+
import 'package:angular/angular.dart';
4+
import 'package:angular/animate/module.dart';
5+
6+
// This annotation allows Dart to shake away any classes
7+
// not used from Dart code nor listed in another @MirrorsUsed.
8+
//
9+
// If you create classes that are referenced from the Angular
10+
// expressions, you must include a library target in @MirrorsUsed.
11+
@MirrorsUsed(override: '*')
12+
import 'dart:mirrors';
13+
14+
part 'repeat_demo.dart';
15+
part 'visibility_demo.dart';
16+
part 'stress_demo.dart';
17+
part 'css_demo.dart';
18+
19+
@NgController(
20+
selector: '[animation-demo]',
21+
publishAs: 'demo'
22+
)
23+
class AnimationDemoController {
24+
var pages = ["About", "ng-repeat", "Visibility", "Css", "Stress Test"];
25+
var currentPage = "About";
26+
}
27+
28+
main() {
29+
ngBootstrap(module: new Module()
30+
..install(new NgAnimateModule())
31+
..type(RepeatDemoComponent)
32+
..type(VisibilityDemoComponent)
33+
..type(StressDemoComponent)
34+
..type(CssDemoComponent)
35+
..type(AnimationDemoController));
36+
}

‎demo/animate_demo/web/css_demo.dart

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
part of animate_demo;
2+
3+
@NgComponent(
4+
selector: 'css-demo',
5+
template: '''
6+
<div class="css-demo">
7+
<button ng-click="ctrl.stateA = !ctrl.stateA"
8+
ng-class="{'active': ctrl.stateA}">
9+
Toggle A</button>
10+
<button ng-click="ctrl.stateB = !ctrl.stateB"
11+
ng-class="{'active': ctrl.stateB}">
12+
Toggle B</button>
13+
<button ng-click="ctrl.stateC = !ctrl.stateC"
14+
ng-class="{'active': ctrl.stateC}">
15+
Toggle C</button>
16+
<div class="box-container">
17+
<div class="css-box" ng-class="{
18+
'a': ctrl.stateA,
19+
'b': ctrl.stateB,
20+
'c': ctrl.stateC}">BOX</div>
21+
</div>
22+
</div>
23+
</div>
24+
''',
25+
publishAs: 'ctrl',
26+
applyAuthorStyles: true
27+
)
28+
class CssDemoComponent {
29+
bool stateA = false;
30+
bool stateB = false;
31+
bool stateC = false;
32+
}

‎demo/animate_demo/web/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>NgAnimate | Demos, Stress Tests, Examples and More!</title>
5+
<link type="text/css" rel="stylesheet" href="style.css" />
6+
</head>
7+
<body class="ng-cloak" ng-app animation-demo>
8+
<nav>
9+
<button ng-repeat="page in demo.pages"
10+
ng-click="demo.currentPage = page"
11+
ng-class="{'current': demo.currentPage == page}">
12+
{{page}}
13+
</button>
14+
</nav>
15+
<div class="content" ng-switch="demo.currentPage">
16+
<div class="demo" ng-switch-default>
17+
<h2>About</h2>
18+
<p>The NgAnimate module is a port with modifications of the original
19+
AngularJS animation module. The default implementation does nothing.
20+
It simply provides hooks into the angular subsystem. Adding
21+
<code>NgAnimateModule</code> however is a whole different story. Once
22+
added it allows you define and run css animations on your elements with
23+
pure CSS.</p>
24+
<p>Check out the demos above.</p>
25+
</div>
26+
<div class="demo" ng-switch-when="ng-repeat">
27+
<h2>ng-repeat Demo</h2>
28+
<repeat-demo></repeat-demo>
29+
</div>
30+
<div class="demo" ng-switch-when="Visibility">
31+
<h2>Visibility Demo</h2>
32+
<visibility-demo></visibility-demo>
33+
</div>
34+
<div class="demo" ng-switch-when="Css">
35+
<h2>Css Demo</h2>
36+
<p><strong>TODO</strong> This should contain a demo of css animation by applying multiple
37+
classes and running multiple simultanious animations on the same
38+
object.</p>
39+
<css-demo></css-demo>
40+
</div>
41+
<div class="demo" ng-switch-when="Stress Test">
42+
<h2>Stress Test</h2>
43+
<stress-demo></stress-demo>
44+
</div>
45+
</div>
46+
<script type="application/dart" src="animate_demo.dart"></script>
47+
<script src="packages/browser/dart.js"></script>
48+
</body>
49+
</html>

‎demo/animate_demo/web/repeat_demo.dart

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
part of animate_demo;
2+
3+
@NgComponent(
4+
selector: 'repeat-demo',
5+
template: '''
6+
<div class="repeat-demo">
7+
<button ng-click="ctrl.addItem()">Add Thing</button>
8+
<button ng-click="ctrl.removeItem()">Remove Thing
9+
</button>
10+
<ul><li ng-repeat="outer in ctrl.items">
11+
<ul><li ng-repeat="inner in ctrl.items">
12+
{{inner}}</li></ul>
13+
</li></ul>
14+
</div>
15+
''',
16+
publishAs: 'ctrl',
17+
applyAuthorStyles: true
18+
)
19+
class RepeatDemoComponent {
20+
var thing = 0;
21+
var items = [];
22+
23+
addItem() {
24+
items.add("Thing ${thing++}");
25+
}
26+
27+
removeItem() {
28+
if (items.length > 0) {
29+
items.removeLast();
30+
}
31+
}
32+
}

‎demo/animate_demo/web/stress_demo.dart

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
part of animate_demo;
2+
3+
@NgComponent(selector: 'stress-demo', template:
4+
'''
5+
<div class="stress-demo">
6+
<button ng-click="ctrl.visible = !ctrl.visible">
7+
Toggle Visibility</button>
8+
<div>
9+
<div class="stress-box"
10+
ng-repeat="number in ctrl.numbers">
11+
</div>
12+
</div>
13+
</div>
14+
''',
15+
publishAs: 'ctrl', applyAuthorStyles: true)
16+
class StressDemoComponent {
17+
bool _visible = true;
18+
19+
// When visibility changes add or remove a large
20+
// chunk of elements.
21+
set visible(bool value) {
22+
if (value) {
23+
for (int i = 0; i < 200; i++) {
24+
numbers.add(i);
25+
}
26+
} else {
27+
numbers.clear();
28+
}
29+
_visible = value;
30+
}
31+
get visible => _visible;
32+
33+
List<int> numbers = [1, 2];
34+
}

0 commit comments

Comments
 (0)