cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(animate): adds basic support for CSS animations on enter and leave

Browse Source 
Closes #3876
This commit is contained in:
Robert Messerle
2015-08-28 14:39:34 -07:00
parent effbb54f3d
commit 39ce9d3397
26 changed files with 688 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
modules/examples/pubspec.yaml
View File

@ -21,7 +21,6 @@ transformers:
# The build currently fails on material files because there is not yet
# support for transforming cross-package urls. (see issue #2982)
- 'web/src/material/**'
- 'web/src/zippy_component/**'
# No need to transform the dart:mirrors specific entrypoints
- '**/index_dynamic.dart'
entry_points:
@ -39,6 +38,7 @@ transformers:
- web/src/web_workers/todo/background_index.dart
- web/src/web_workers/message_broker/background_index.dart
- web/src/web_workers/kitchen_sink/background_index.dart
- web/src/zippy_component/index.dart
# These entrypoints are disabled untl the transformer supports UI bootstrap (issue #3971)
# - web/src/web_workers/message_broker/index.dart
@ -53,7 +53,6 @@ transformers:
# - web/src/material/progress-linear/index.dart
# - web/src/material/radio/index.dart
# - web/src/material/switcher/index.dart
# - web/src/zippy_component/index.dart
#
# This entrypoint is not needed:
# - web/src/material/demo_common.dart

14
modules/examples/src/animate/animate-app.ts Normal file
View File

@ -0,0 +1,14 @@
import {Component, View, NgIf} from 'angular2/angular2';
@Component({selector: 'animate-app'})
@View({
directives: [NgIf],
template: `
<h1>The box is {{visible ? 'visible' : 'hidden'}}</h1>
<div class="ng-animate box" *ng-if="visible"></div>
<button (click)="visible = !visible">Animate</button>
`
})
export class AnimateApp {
visible: boolean = false;
}

25
modules/examples/src/animate/css/app.css Normal file
View File

@ -0,0 +1,25 @@
body {
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
transition: all 0.35s ease-in-out;
}
.box.blue {
background-color: blue;
}
.box.ng-enter {
opacity: 0;
height: 0;
}
.box.ng-enter-active {
opacity: 1;
height: 100px;
}
.box.ng-leave-active {
opacity: 0;
height: 0;
}

10
modules/examples/src/animate/index.html Normal file
View File

@ -0,0 +1,10 @@
<!doctype html>
<html>
<title>Animation Example</title>
<link rel="stylesheet" type="text/css" href="./css/app.css" />
<base href="/examples/src/animate/">
<body>
<animate-app>Loading...</animate-app>
$SCRIPTS$
</body>
</html>

6
modules/examples/src/animate/index.ts Normal file
View File

@ -0,0 +1,6 @@
import {AnimateApp} from './animate-app';
import {bootstrap} from 'angular2/bootstrap';
export function main() {
bootstrap(AnimateApp);
}