honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
angular-cn/aio/content/examples/animations/ts/plnkr.no-link.html

1011 lines
28 KiB
HTML
Raw Normal View History

feat(aio): copy example code from angular.io
2017-02-22 13:13:21 -05:00
<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HeroTeamBuilderComponent } from './hero-team-builder.component';
import { HeroListBasicComponent } from './hero-list-basic.component';
import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component';
import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
import { HeroListEnterLeaveStatesComponent } from './hero-list-enter-leave-states.component';
import { HeroListCombinedTransitionsComponent } from './hero-list-combined-transitions.component';
import { HeroListTwowayComponent } from './hero-list-twoway.component';
import { HeroListAutoComponent } from './hero-list-auto.component';
import { HeroListGroupsComponent } from './hero-list-groups.component';
import { HeroListMultistepComponent } from './hero-list-multistep.component';
import { HeroListTimingsComponent } from './hero-list-timings.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [
HeroTeamBuilderComponent,
HeroListBasicComponent,
HeroListInlineStylesComponent,
HeroListCombinedTransitionsComponent,
HeroListTwowayComponent,
HeroListEnterLeaveComponent,
HeroListEnterLeaveStatesComponent,
HeroListAutoComponent,
HeroListTimingsComponent,
HeroListMultistepComponent,
HeroListGroupsComponent
],
bootstrap: [ HeroTeamBuilderComponent ]
})
export class AppModule { }
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero-list-auto.component.ts]" value="import {
Component,
Input,
trigger,
state,
style,
animate,
transition
} from '@angular/core';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-auto',
template: `
<ul>
<li *ngFor=&quot;let hero of heroes&quot;
[@shrinkOut]=&quot;'in'&quot;>
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['./hero-list.component.css'],
/* When the element leaves (transition &quot;in => void&quot; occurs),
* get the element's current computed height and animate
* it down to 0.
*/
animations: [
trigger('shrinkOut', [
state('in', style({height: '*'})),
transition('* => void', [
style({height: '*'}),
animate(250, style({height: 0}))
])
])
]
})
export class HeroListAutoComponent {
@Input() heroes: Heroes;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero-list-basic.component.ts]" value="import {
Component,
Input,
trigger,
state,
style,
transition,
animate
} from '@angular/core';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-basic',
/* The click event calls hero.toggleState(), which
* causes the state of that hero to switch from
* active to inactive or vice versa.
*/
template: `
<ul>
<li *ngFor=&quot;let hero of heroes&quot;
[@heroState]=&quot;hero.state&quot;
(click)=&quot;hero.toggleState()&quot;>
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['./hero-list.component.css'],
/**
* Define two states, &quot;inactive&quot; and &quot;active&quot;, and the end
* styles that apply whenever the element is in those states.
* Then define animations for transitioning between the states,
* one in each direction
*/
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])
]
})
export class HeroListBasicComponent {
@Input() heroes: Heroes;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero-list-combined-transitions.component.ts]" value="import {
Component,
Input,
trigger,
state,
style,
transition,
animate
} from '@angular/core';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-combined-transitions',
template: `
<ul>
<li *ngFor=&quot;let hero of heroes&quot;
[@heroState]=&quot;hero.state&quot;
(click)=&quot;hero.toggleState()&quot;>
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['./hero-list.component.css'],
/*
* Define two states, &quot;inactive&quot; and &quot;active&quot;, and the end
* styles that apply whenever the element is in those states.
* Then define an animated transition between these two
* states, in *both* directions.
*/
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active, active => inactive',
animate('100ms ease-out'))
])
]
})
export class HeroListCombinedTransitionsComponent {
@Input() heroes: Heroes;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero-list-enter-leave-states.component.ts]" value="import {
Component,
Input,
trigger,
state,
style,
animate,
transition
} from '@angular/core';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-enter-leave-states',
template: `
<ul>
<li *ngFor=&quot;let hero of heroes&quot;
(click)=&quot;hero.toggleState()&quot;
[@heroState]=&quot;hero.state&quot;>
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['./hero-list.component.css'],
/* The elements here have two possible states based
* on the hero state, &quot;active&quot;, or &quot;inactive&quot;. We animate
* six transitions: Between the two states in both directions,
* and between each state and void. With this we can animate
* the enter and leave of elements differently based on which
* state they are in when they are added and removed.
*/
animations: [
trigger('heroState', [
state('inactive', style({transform: 'translateX(0) scale(1)'})),
state('active', style({transform: 'translateX(0) scale(1.1)'})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out')),
transition('void => inactive', [
style({transform: 'translateX(-100%) scale(1)'}),
animate(100)
]),
transition('inactive => void', [
animate(100, style({transform: 'translateX(100%) scale(1)'}))
]),
transition('void => active', [
style({transform: 'translateX(0) scale(0)'}),
animate(200)
]),
transition('active => void', [
animate(200, style({transform: 'translateX(0) scale(0)'}))
])
])
]
})
export class HeroListEnterLeaveStatesComponent {
@Input() heroes: Heroes;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero-list-enter-leave.component.ts]" value="import {
Component,
Input,
trigger,
state,
style,
animate,
transition
} from '@angular/core';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-enter-leave',
template: `
<ul>
<li *ngFor=&quot;let hero of heroes&quot;
[@flyInOut]=&quot;'in'&quot;>
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['./hero-list.component.css'],
/* The element here always has the state &quot;in&quot; when it
* is present. We animate two transitions: From void
* to in and from in to void, to achieve an animated
* enter and leave transition. The element enters from
* the left and leaves to the right using translateX.
*/
animations: [
trigger('flyInOut', [
state('in', style({transform: 'translateX(0)'})),
transition('void => *', [
style({transform: 'translateX(-100%)'}),
animate(100)
]),
transition('* => void', [
animate(100, style({transform: 'translateX(100%)'}))
])
])
]
})
export class HeroListEnterLeaveComponent {
@Input() heroes: Heroes;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero-list-groups.component.ts]" value="import {
Component,
Input,
trigger,
state,
style,
animate,
transition,
group
} from '@angular/core';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-groups',
template: `
<ul>
<li *ngFor=&quot;let hero of heroes&quot;
[@flyInOut]=&quot;'in'&quot;>
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['./hero-list.component.css'],
styles: [`
li {
padding: 0 !important;
text-align: center;
}
`],
/* The element here always has the state &quot;in&quot; when it
* is present. We animate two transitions: From void
* to in and from in to void, to achieve an animated
* enter and leave transition.
*
* The transitions have *parallel group* that allow
* animating several properties at the same time but
* with different timing configurations. On enter
* (void => *) we start the opacity animation 0.1s
* earlier than the translation/width animation.
* On leave (* => void) we do the opposite -
* the translation/width animation begins immediately
* and the opacity animation 0.1s later.
*/
animations: [
trigger('flyInOut', [
state('in', style({width: 120, transform: 'translateX(0)', opacity: 1})),
transition('void => *', [
style({width: 10, transform: 'translateX(50px)', opacity: 0}),
group([
animate('0.3s 0.1s ease', style({
transform: 'translateX(0)',
width: 120
})),
animate('0.3s ease', style({
opacity: 1
}))
])
]),
transition('* => void', [
group([
animate('0.3s ease', style({
transform: 'translateX(50px)',
width: 10
})),
animate('0.3s 0.2s ease', style({
opacity: 0
}))
])
])
])
]
})
export class HeroListGroupsComponent {
@Input() heroes: Heroes;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero-list-inline-styles.component.ts]" value="import {
Component,
Input,
trigger,
style,
transition,
animate
} from '@angular/core';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-inline-styles',
template: `
<ul>
<li *ngFor=&quot;let hero of heroes&quot;
[@heroState]=&quot;hero.state&quot;
(click)=&quot;hero.toggleState()&quot;>
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['./hero-list.component.css'],
/**
* Define two states, &quot;inactive&quot; and &quot;active&quot;, and the end
* styles that apply whenever the element is in those states.
* Then define an animation for the inactive => active transition.
* This animation has no end styles, but only styles that are
* defined inline inside the transition and thus are only kept
* as long as the animation is running.
*/
animations: [
trigger('heroState', [
transition('inactive => active', [
style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.3)'
}),
animate('80ms ease-in', style({
backgroundColor: '#eee',
transform: 'scale(1)'
}))
]),
])
]
})
export class HeroListInlineStylesComponent {
@Input() heroes: Heroes;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero-list-multistep.component.ts]" value="import {
Component,
Input,
trigger,
state,
style,
animate,
transition,
keyframes,
AnimationTransitionEvent
} from '@angular/core';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-multistep',
template: `
<ul>
<li *ngFor=&quot;let hero of heroes&quot;
(@flyInOut.start)=&quot;animationStarted($event)&quot;
(@flyInOut.done)=&quot;animationDone($event)&quot;
[@flyInOut]=&quot;'in'&quot;>
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['./hero-list.component.css'],
/* The element here always has the state &quot;in&quot; when it
* is present. We animate two transitions: From void
* to in and from in to void, to achieve an animated
* enter and leave transition. Each transition is
* defined in terms of multiple keyframes, to give it
* a bounce effect.
*/
animations: [
trigger('flyInOut', [
state('in', style({transform: 'translateX(0)'})),
transition('void => *', [
animate(300, keyframes([
style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
style({opacity: 1, transform: 'translateX(15px)', offset: 0.3}),
style({opacity: 1, transform: 'translateX(0)', offset: 1.0})
]))
]),
transition('* => void', [
animate(300, keyframes([
style({opacity: 1, transform: 'translateX(0)', offset: 0}),
style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
style({opacity: 0, transform: 'translateX(100%)', offset: 1.0})
]))
])
])
]
})
export class HeroListMultistepComponent {
@Input() heroes: Heroes;
animationStarted(event: AnimationTransitionEvent) {
console.warn('Animation started: ', event);
}
animationDone(event: AnimationTransitionEvent) {
console.warn('Animation done: ', event);
}
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero-list-timings.component.ts]" value="import {
Component,
Input,
trigger,
state,
style,
animate,
transition
} from '@angular/core';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-timings',
template: `
<ul>
<li *ngFor=&quot;let hero of heroes&quot;
[@flyInOut]=&quot;'in'&quot;
(click)=&quot;hero.toggleState()&quot;>
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['./hero-list.component.css'],
/* The element here always has the state &quot;in&quot; when it
* is present. We animate two transitions: From void
* to in and from in to void, to achieve an animated
* enter and leave transition. The element enters from
* the left and leaves to the right using translateX,
* and fades in/out using opacity. We use different easings
* for enter and leave.
*/
animations: [
trigger('flyInOut', [
state('in', style({opacity: 1, transform: 'translateX(0)'})),
transition('void => *', [
style({
opacity: 0,
transform: 'translateX(-100%)'
}),
animate('0.2s ease-in')
]),
transition('* => void', [
animate('0.2s 10 ease-out', style({
opacity: 0,
transform: 'translateX(100%)'
}))
])
])
]
})
export class HeroListTimingsComponent {
@Input() heroes: Heroes;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero-list-twoway.component.ts]" value="import {
Component,
Input,
trigger,
state,
style,
transition,
animate
} from '@angular/core';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-twoway',
template: `
<ul>
<li *ngFor=&quot;let hero of heroes&quot;
[@heroState]=&quot;hero.state&quot;
(click)=&quot;hero.toggleState()&quot;>
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['./hero-list.component.css'],
/*
* Define two states, &quot;inactive&quot; and &quot;active&quot;, and the end
* styles that apply whenever the element is in those states.
* Then define an animated transition between these two
* states, in *both* directions.
*/
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive <=> active', animate('100ms ease-out'))
])
]
})
export class HeroListTwowayComponent {
@Input() heroes: Heroes;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero-team-builder.component.ts]" value="import { Component } from '@angular/core';
import { Heroes } from './hero.service';
@Component({
selector: 'hero-team-builder',
template: `
<div class=&quot;buttons&quot;>
<button [disabled]=&quot;!heroes.canAdd()&quot; (click)=&quot;heroes.addInactive()&quot;>Add inactive hero</button>
<button [disabled]=&quot;!heroes.canAdd()&quot; (click)=&quot;heroes.addActive()&quot;>Add active hero</button>
<button [disabled]=&quot;!heroes.canRemove()&quot; (click)=&quot;heroes.remove()&quot;>Remove hero</button>
</div>
<div class=&quot;columns&quot;>
<div class=&quot;column&quot;>
<h4>Basic State</h4>
<p>Switch between active/inactive on click.</p>
<hero-list-basic [heroes]=heroes></hero-list-basic>
</div>
<div class=&quot;column&quot;>
<h4>Styles inline in transitions</h4>
<p>Animated effect on click, no persistend end styles.</p>
<hero-list-inline-styles [heroes]=heroes></hero-list-inline-styles>
</div>
<div class=&quot;column&quot;>
<h4>Combined transition syntax</h4>
<p>Switch between active/inactive on click. Define just one transition used in both directions.</p>
<hero-list-combined-transitions [heroes]=heroes></hero-list-combined-transitions>
</div>
<div class=&quot;column&quot;>
<h4>Two-way transition syntax</h4>
<p>Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.</p>
<hero-list-twoway [heroes]=heroes></hero-list-twoway>
</div>
<div class=&quot;column&quot;>
<h4>Enter &amp; Leave</h4>
<p>Enter and leave animations using the void state.</p>
<hero-list-enter-leave [heroes]=heroes></hero-list-enter-leave>
</div>
</div>
<div class=&quot;columns&quot;>
<div class=&quot;column&quot;>
<h4>Enter &amp; Leave &amp; States</h4>
<p>
Enter and leave animations combined with active/inactive state animations.
Different enter and leave transitions depending on state.
</p>
<hero-list-enter-leave-states [heroes]=heroes></hero-list-enter-leave-states>
</div>
<div class=&quot;column&quot;>
<h4>Auto Style Calc</h4>
<p>Leave animation from the current computed height using the auto-style value *.</p>
<hero-list-auto [heroes]=heroes></hero-list-auto>
</div>
<div class=&quot;column&quot;>
<h4>Different Timings</h4>
<p>Enter and leave animations with different easings, ease-in for enter, ease-out for leave.</p>
<hero-list-timings [heroes]=heroes></hero-list-timings>
</div>
<div class=&quot;column&quot;>
<h4>Multiple Keyframes</h4>
<p>Enter and leave animations with three keyframes in each, to give the transition some bounce.</p>
<hero-list-multistep [heroes]=heroes></hero-list-multistep>
</div>
<div class=&quot;column&quot;>
<h4>Parallel Groups</h4>
<p>Enter and leave animations with multiple properties animated in parallel with different timings.</p>
<hero-list-groups [heroes]=heroes></hero-list-groups>
</div>
</div>
`,
styles: [`
.buttons {
text-align: center;
}
button {
padding: 1.5em 3em;
}
.columns {
display: flex;
flex-direction: row;
}
.column {
flex: 1;
padding: 10px;
}
.column p {
min-height: 6em;
}
`],
providers: [Heroes]
})
export class HeroTeamBuilderComponent {
constructor(private heroes: Heroes) { }
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero.service.ts]" value="import { Injectable } from '@angular/core';
class Hero {
constructor(public name: string,
public state = 'inactive') {
}
toggleState() {
this.state = (this.state === 'active' ? 'inactive' : 'active');
}
}
let ALL_HEROES = [
'Windstorm',
'RubberMan',
'Bombasto',
'Magneta',
'Dynama',
'Narco',
'Celeritas',
'Dr IQ',
'Magma',
'Tornado',
'Mr. Nice'
].map(name => new Hero(name));
@Injectable()
export class Heroes implements Iterable<Hero> {
currentHeroes: Hero[] = [];
[Symbol.iterator]() {
return this.currentHeroes.values();
}
canAdd() {
return this.currentHeroes.length < ALL_HEROES.length;
}
canRemove() {
return this.currentHeroes.length > 0;
}
addActive() {
let hero = ALL_HEROES[this.currentHeroes.length];
hero.state = 'active';
this.currentHeroes.push(hero);
}
addInactive() {
let hero = ALL_HEROES[this.currentHeroes.length];
hero.state = 'inactive';
this.currentHeroes.push(hero);
}
remove() {
this.currentHeroes.splice(this.currentHeroes.length - 1, 1);
}
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero-list.component.css]" value="ul {
list-style-type: none;
padding: 0;
}
li {
display: block;
width: 120px;
line-height: 50px;
padding: 0 10px;
box-sizing: border-box;
background-color: #eee;
border-radius: 4px;
margin: 10px;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
}
.active {
background-color: #cfd8dc;
transform: scale(1.1);
}
.inactive {
background-color: #eee;
transform: scale(1);
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
a {
cursor: pointer;
cursor: hand;
}
button {
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
color: #aaa;
cursor: auto;
}
/* Navigation link styles */
nav a {
padding: 5px 10px;
text-decoration: none;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
background-color: #eee;
border-radius: 4px;
}
nav a:visited, a:link {
color: #607D8B;
}
nav a:hover {
color: #039be5;
background-color: #CFD8DC;
}
nav a.active {
color: #039be5;
}
/* items class */
.items {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 24em;
}
.items li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.items li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.items li.selected {
background-color: #CFD8DC;
color: white;
}
.items li.selected:hover {
background-color: #BBD8DC;
}
.items .text {
position: relative;
top: -3px;
}
.items .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
<html>
<head>
<meta charset=&quot;UTF-8&quot;>
<title>Animations</title>
<script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
<!-- Polyfill for Web Animations -->
<script src=&quot;https://unpkg.com/web-animations-js@2.2.1&quot;></script>
<!-- Polyfills -->
<script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
<script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
<script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
<script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<h1 style=&quot;visibility: hidden;&quot;>External H1 Title for E2E test</h1>
<hero-team-builder></hero-team-builder>
<button style=&quot;visibility: hidden;&quot;>External button for E2E test</button>
<ul style=&quot;visibility: hidden;&quot;>
<li>External list for E2E test</li>
</ul>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Angular Animations"></form><script>document.getElementById("mainForm").submit();</script></body></html>