docs(animate): add animations documentation

This commit is contained in:
Tero Parviainen 2016-04-08 15:41:37 +03:00 committed by Naomi Black
parent 82b4657422
commit bead3620df
37 changed files with 1627 additions and 0 deletions

View File

@ -0,0 +1,285 @@
/// <reference path='../_protractor/e2e.d.ts' />
/**
* The tests here basically just checking that the end styles
* of each animation are in effect.
*
* Relies on the Angular 2 testability only becoming stable once
* animation(s) have finished.
*
* Ideally we'd use https://developer.mozilla.org/en-US/docs/Web/API/Document/getAnimations
* but they're not supported in Chrome at the moment. The upcoming nganimate polyfill
* may also add some introspection support.
*/
describe('Animation Tests', () => {
const INACTIVE_COLOR = 'rgba(238, 238, 238, 1)';
const ACTIVE_COLOR = 'rgba(207, 216, 220, 1)';
const NO_TRANSFORM_MATRIX_REGEX = /matrix\(1,\s*0,\s*0,\s*1,\s*0,\s*0\)/;
beforeEach(() => {
browser.get('');
});
describe('basic states', () => {
let host: protractor.ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-basic'));
});
it('animates between active and inactive', () => {
addHero();
let li = host.element(by.css('li'));
expect(getScaleX(li)).toBe(1.0);
expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
li.click();
expect(getScaleX(li)).toBe(1.1);
expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
li.click();
expect(getScaleX(li)).toBe(1.0);
expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
});
});
describe('styles inline in transitions', () => {
var host: protractor.ElementFinder;
beforeEach(function() {
host = element(by.css('hero-list-inline-styles'));
});
it('are not kept after animation', () => {
addHero();
var li = host.element(by.css('li'));
li.click();
expect(getScaleX(li)).toBe(1.0);
expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
});
});
describe('combined transition syntax', () => {
let host: protractor.ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-combined-transitions'));
});
it('animates between active and inactive', () => {
addHero();
let li = host.element(by.css('li'));
expect(getScaleX(li)).toBe(1.0);
expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
li.click();
expect(getScaleX(li)).toBe(1.1);
expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
li.click();
expect(getScaleX(li)).toBe(1.0);
expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
});
});
describe('two-way transition syntax', () => {
let host: protractor.ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-twoway'));
});
it('animates between active and inactive', () => {
addHero();
let li = host.element(by.css('li'));
expect(getScaleX(li)).toBe(1.0);
expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
li.click();
expect(getScaleX(li)).toBe(1.1);
expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
li.click();
expect(getScaleX(li)).toBe(1.0);
expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
});
});
describe('enter & leave', () => {
let host: protractor.ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-enter-leave'));
});
it('adds and removes element', () => {
addHero();
let li = host.element(by.css('li'));
expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
removeHero();
expect(li.isPresent()).toBe(false);
});
});
describe('enter & leave & states', () => {
let host: protractor.ElementFinder;
beforeEach(function() {
host = element(by.css('hero-list-enter-leave-states'));
});
it('adds and removes and animates between active and inactive', () => {
addHero();
let li = host.element(by.css('li'));
expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
li.click();
expect(getScaleX(li)).toBe(1.1);
li.click();
expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
removeHero();
expect(li.isPresent()).toBe(false);
});
});
describe('auto style calc', () => {
let host: protractor.ElementFinder;
beforeEach(function() {
host = element(by.css('hero-list-auto'));
});
it('adds and removes element', () => {
addHero();
let li = host.element(by.css('li'));
expect(li.getCssValue('height')).toBe('50px');
removeHero();
expect(li.isPresent()).toBe(false);
});
});
describe('different timings', () => {
let host: protractor.ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-timings'));
});
it('adds and removes element', () => {
addHero();
let li = host.element(by.css('li'));
expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
expect(li.getCssValue('opacity')).toMatch('1');
removeHero();
expect(li.isPresent()).toBe(false);
});
});
describe('multiple keyframes', () => {
let host: protractor.ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-multistep'));
});
it('adds and removes element', () => {
addHero();
let li = host.element(by.css('li'));
expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
expect(li.getCssValue('opacity')).toMatch('1');
removeHero();
expect(li.isPresent()).toBe(false);
});
});
describe('parallel groups', () => {
var host: protractor.ElementFinder;
beforeEach(() => {
host = element(by.css('hero-list-groups'));
});
it('adds and removes element', () => {
addHero();
let li = host.element(by.css('li'));
expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
expect(li.getCssValue('opacity')).toMatch('1');
removeHero();
expect(li.isPresent()).toBe(false);
});
});
function addHero() {
element(by.buttonText('Add hero')).click();
}
function removeHero() {
element(by.buttonText('Remove hero')).click();
}
function getScaleX(el: protractor.ElementFinder) {
return protractor.promise.all([
getBoundingClientWidth(el),
getOffsetWidth(el)
]).then(function([clientWidth, offsetWidth]) {
return clientWidth / offsetWidth;
});
}
function getBoundingClientWidth(el: protractor.ElementFinder): protractor.promise.Promise<number> {
return browser.executeScript(
'return arguments[0].getBoundingClientRect().width',
el.getWebElement()
);
}
function getOffsetWidth(el: protractor.ElementFinder): protractor.promise.Promise<number> {
return browser.executeScript(
'return arguments[0].offsetWidth',
el.getWebElement()
);
}
});

View File

@ -0,0 +1 @@
**/*.js

View File

@ -0,0 +1 @@
This example folder is in a WIP state as Animations are not merged into Angular yet.

View File

@ -0,0 +1,46 @@
import {
Component,
Input,
trigger,
state,
style,
animate,
transition,
group
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-auto',
// #docregion template
template: `
<ul>
<li *ngFor="let hero of heroes"
@shrinkOut="'in'">
{{hero.name}}
</li>
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
/* When the element leaves (transition "in => void" occurs),
* get the element's current computed height and animate
* it down to 0.
*/
// #docregion animationdef
animations: [
trigger('shrinkOut', [
state('in', style({height: '*'})),
transition('* => void', [
style({height: '*'}),
animate(250, style({height: 0}))
])
])
]
// #enddocregion animationdef
})
export class HeroListAutoComponent {
@Input() heroes:Heroes;
}

View File

@ -0,0 +1,68 @@
// #docplaster
// #docregion
// #docregion imports
import {
Component,
Input,
trigger,
state,
style,
transition,
animate
} from '@angular/core';
// #enddocregion imports
import { Hero, Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-basic',
// #enddocregion
/* The click event calls hero.toggleState(), which
* causes the state of that hero to switch from
* active to inactive or vice versa.
*/
// #docregion
// #docregion template
template: `
<ul>
<li *ngFor="let hero of heroes"
@heroState="hero.state"
(click)="hero.toggleState()">
{{hero.name}}
</li>
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
// #enddocregion
/**
* Define two states, "inactive" and "active", 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
*/
// #docregion
// #docregion animationdef
animations: [
trigger('heroState', [
// #docregion states
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
// #enddocregion states
// #docregion transitions
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
// #enddocregion transitions
])
]
// #enddocregion animationdef
})
export class HeroListBasicComponent {
@Input() heroes:Heroes;
}

View File

@ -0,0 +1,46 @@
import {
Component,
Input,
trigger,
state,
style,
animate,
transition,
group
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-classes',
template: `
<ul>
<li *ngFor="let hero of heroes"
@heroState="hero.state"
(click)="hero.toggleState()">
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['hero-list.component.css'],
/**
* Define two states, "inactive" and "active", and make it so
* that the styles for those states are pulled in from the
* component stylesheet using CSS classes inactive and active.
* Then define animations for transitioning between the states,
* one in each direction
*/
// #docregion animationdef
animations: [
trigger('heroState', [
state('inactive', style('.inactive')),
state('active', style('.active')),
transition('inactive => active', animate(100)),
transition('active => inactive', animate(100))
])
]
// #enddocregion animationdef
})
export class HeroListClassesComponent {
@Input() heroes:Heroes;
}

View File

@ -0,0 +1,57 @@
// #docregion
// #docregion imports
import {
Component,
Input,
trigger,
state,
style,
transition,
animate
} from '@angular/core';
// #enddocregion imports
import { Hero, Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-combined-transitions',
// #docregion template
template: `
<ul>
<li *ngFor="let hero of heroes"
@heroState="hero.state"
(click)="hero.toggleState()">
{{hero.name}}
</li>
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
/*
* Define two states, "inactive" and "active", 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.
*/
// #docregion animationdef
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
// #docregion transitions
transition('inactive => active, active => inactive',
animate('100ms ease-out'))
// #enddocregion transitions
])
]
// #enddocregion animationdef
})
export class HeroListCombinedTransitionsComponent {
@Input() heroes:Heroes;
}

View File

@ -0,0 +1,62 @@
import {
Component,
Input,
trigger,
state,
style,
animate,
transition,
group
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-enter-leave-states',
// #docregion template
template: `
<ul>
<li *ngFor="let hero of heroes"
(click)="hero.toggleState()"
@heroState="hero.state">
{{hero.name}}
</li>
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
/* The elements here have two possible states based
* on the hero state, "active", or "inactive". 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.
*/
// #docregion animationdef
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)'}))
])
])
]
// #enddocregion animationdef
})
export class HeroListEnterLeaveStatesComponent {
@Input() heroes:Heroes;
}

View File

@ -0,0 +1,50 @@
import {
Component,
Input,
trigger,
state,
style,
animate,
transition,
group
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-enter-leave',
// #docregion template
template: `
<ul>
<li *ngFor="let hero of heroes"
@flyInOut="'in'">
{{hero.name}}
</li>
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
/* The element here always has the state "in" 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.
*/
// #docregion animationdef
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%)'}))
])
])
]
// #enddocregion animationdef
})
export class HeroListEnterLeaveComponent {
@Input() heroes:Heroes;
}

View File

@ -0,0 +1,78 @@
import {
Component,
Input,
trigger,
state,
style,
animate,
transition,
group
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-groups',
template: `
<ul>
<li *ngFor="let hero of heroes"
@flyInOut="'in'">
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['hero-list.component.css'],
styles: [`
li {
padding: 0 !important;
text-align: center;
}
`],
/* The element here always has the state "in" 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.
*/
// #docregion animationdef
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
}))
])
])
])
]
// #enddocregion animationdef
})
export class HeroListGroupsComponent {
@Input() heroes:Heroes;
}

View File

@ -0,0 +1,59 @@
// #docregion
// #docregion imports
import {
Component,
Input,
trigger,
state,
style,
transition,
animate
} from '@angular/core';
// #enddocregion imports
import { Hero, Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-inline-styles',
// #docregion template
template: `
<ul>
<li *ngFor="let hero of heroes"
@heroState="hero.state"
(click)="hero.toggleState()">
{{hero.name}}
</li>
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
/**
* Define two states, "inactive" and "active", 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.
*/
// #docregion animationdef
animations: [
trigger('heroState', [
// #docregion transitions
transition('inactive => active', [
style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.3)'
}),
animate('80ms ease-in', style({
backgroundColor: '#eee',
transform: 'scale(1)'
}))
]),
// #enddocregion transitions
])
]
// #enddocregion animationdef
})
export class HeroListInlineStylesComponent {
@Input() heroes:Heroes;
}

View File

@ -0,0 +1,63 @@
import {
Component,
Input,
trigger,
state,
style,
keyframes,
animate,
transition,
group
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-keyframes',
template: `
<ul>
<li *ngFor="let hero of heroes"
@flyInOut="'in'">
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['hero-list.component.css'],
/* The element here always has the state "in" 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 actual animations
* are defined as CSS keyframes in the component
* stylesheet. They are pulled into the transition
* configuration using the keyframes() function.
*/
// #docregion animationdef
styles: [`
@keyframes flyIn {
0% { opacity: 0; transform: translateX(-100%); }
30% { opacity: 1; transform: translateX(15px); }
100% { opacity: 1; transform: translateX(0); }
}
@keyframes flyOut {
0% { opacity: 1; transform: translateX(0); }
70% { opacity: 1; transform: translateX(-15px); }
100% { opacity: 1; transform: translateX(100%); }
}
`],
animations: [
trigger('flyInOut', [
transition('void => *', [
// Enable when CSS parser integration has been added
// animate(300, keyframes('flyIn'))
]),
transition('* => void', [
// Enable when CSS parser integration has been added
// animate(300, keyframes('flyOut'))
])
])
]
// #enddocregion animationdef
})
export class HeroListKeyframesComponent {
@Input() heroes:Heroes;
}

View File

@ -0,0 +1,57 @@
import {
Component,
Input,
trigger,
state,
style,
animate,
transition,
group,
keyframes
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-multistep',
template: `
<ul>
<li *ngFor="let hero of heroes"
@flyInOut="'in'">
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['hero-list.component.css'],
/* The element here always has the state "in" 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.
*/
// #docregion animationdef
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})
]))
])
])
]
// #enddocregion animationdef
})
export class HeroListMultistepComponent {
@Input() heroes:Heroes;
}

View File

@ -0,0 +1,57 @@
import {
Component,
Input,
trigger,
state,
style,
animate,
transition,
group
} from '@angular/core';
import { Hero, Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-timings',
template: `
<ul>
<li *ngFor="let hero of heroes"
@flyInOut="'in'"
(click)="hero.toggleState()">
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['hero-list.component.css'],
/* The element here always has the state "in" 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.
*/
// #docregion animationdef
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%)'
}))
])
])
]
// #enddocregion animationdef
})
export class HeroListTimingsComponent {
@Input() heroes:Heroes;
}

View File

@ -0,0 +1,56 @@
// #docregion
// #docregion imports
import {
Component,
Input,
trigger,
state,
style,
transition,
animate
} from '@angular/core';
// #enddocregion imports
import { Hero, Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-twoway',
// #docregion template
template: `
<ul>
<li *ngFor="let hero of heroes"
@heroState="hero.state"
(click)="hero.toggleState()">
{{hero.name}}
</li>
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
/*
* Define two states, "inactive" and "active", 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.
*/
// #docregion animationdef
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
// #docregion transitions
transition('inactive <=> active', animate('100ms ease-out'))
// #enddocregion transitions
])
]
// #enddocregion animationdef
})
export class HeroListTwowayComponent {
@Input() heroes:Heroes;
}

View File

@ -0,0 +1,27 @@
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);
}

View File

@ -0,0 +1,128 @@
import { Component } from '@angular/core';
import { Hero, Heroes } from './hero.service';
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';
// Enable when CSS parser integration has been added
// import {HeroListClassesComponent} from './hero-list-classes.component';
import { HeroListGroupsComponent } from './hero-list-groups.component';
// Enable when CSS parser integration has been added
// import {HeroListKeyframesComponent} from './hero-list-keyframes.component';
import { HeroListMultistepComponent } from './hero-list-multistep.component';
import { HeroListTimingsComponent } from './hero-list-timings.component';
@Component({
selector: 'hero-team-builder',
template: `
<div class="buttons">
<button [disabled]="!heroes.canAdd()" (click)="heroes.add()">Add hero</button>
<button [disabled]="!heroes.canRemove()" (click)="heroes.remove()">Remove hero</button>
</div>
<div class="columns">
<div class="column">
<h4>Basic State</h4>
<p>Switch between active/inactive on click.</p>
<hero-list-basic [heroes]=heroes></hero-list-basic>
</div>
<div class="column">
<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="column">
<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="column">
<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="column">
<h4>Enter & 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="columns">
<div class="column">
<h4>Enter & Leave & 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="column">
<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="column">
<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="column">
<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="column">
<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 class="column">
<h4>CSS Classes</h4>
<p>Switch between active/inactive on click. Pull the actual CSS styles in from component stylesheet.</p>
<hero-list-classes [heroes]=heroes></hero-list-classes>
</div-->
<!--div class="column">
<h4>CSS Keyframes</h4>
<p>Enter and leave animations with three keyframes in each, to give the transition some bounce. Pull in the actual keyframes from CSS keyframes in component stylesheet.</p>
<hero-list-multistep [heroes]=heroes></hero-list-multistep>
<hero-list-keyframes [heroes]=heroes></hero-list-keyframes>
</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;
}
`],
directives: [
HeroListBasicComponent,
HeroListInlineStylesComponent,
HeroListCombinedTransitionsComponent,
HeroListTwowayComponent,
HeroListEnterLeaveComponent,
HeroListEnterLeaveStatesComponent,
HeroListAutoComponent,
HeroListTimingsComponent,
// HeroListClassesComponent,
// HeroListKeyframesComponent,
HeroListMultistepComponent,
HeroListGroupsComponent
],
providers: [Heroes]
})
export class HeroTeamBuilderComponent {
constructor(private heroes:Heroes) { }
}

View File

@ -0,0 +1,54 @@
import { Injectable } from '@angular/core';
export class Hero {
constructor(public name:string,
public state = 'inactive') {
}
toggleState() {
this.state = (this.state === 'active' ? 'inactive' : 'active');
}
}
@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;
}
add() {
this.currentHeroes.push(ALL_HEROES[this.currentHeroes.length]);
}
remove() {
this.currentHeroes.splice(this.currentHeroes.length - 1, 1);
}
}
var ALL_HEROES = [
'Wolverine',
'Magneto',
'Emma Frost',
'Thing',
'Kitty Pryde',
'Nightcrawler',
'Juggernaut',
'Beast',
'Captain America',
'Spider-Man',
'Puck',
'Alex Wilder',
'Doctor Strange'
].map(name => new Hero(name));

View File

@ -0,0 +1,4 @@
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HeroTeamBuilderComponent } from './hero-team-builder.component';
bootstrap(HeroTeamBuilderComponent);

View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<my-app>
</my-app>
<script src="bundle.js"></script>
</body>
</html>

View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animations</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill for Web Animations -->
<!-- This can be replaced with Angular's own once it ships -->
<script src="https://npmcdn.com/web-animations-js@2.2.1"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
<hero-team-builder></hero-team-builder>
<button style="visibility: hidden;">External button for E2E test</button>
<ul style="visibility: hidden;">
<li>External list for E2E test</li>
</ul>
</body>
</html>

View File

@ -0,0 +1,7 @@
{
"description": "Angular 2 Animations",
"files":[
"!**/*.d.ts",
"!**/*.js"
]
}

View File

@ -63,6 +63,11 @@
"basics": true
},
"animations": {
"title": "Animations",
"intro": "A guide to Angular's animation system."
},
"attribute-directives": {
"title": "Attribute Directives",
"intro": "Attribute directives attach behavior to elements."

View File

@ -0,0 +1,369 @@
include ../_util-fns
:marked
Motion is an important aspect in the design of modern web applications. We want our
user interfaces to have smooth transitions between states, and engaging animations
that call attention where it's needed. Well-designed animations can make a UI not only
more fun but also easier to use.
Angular's animation system gives us what we need to make the kinds of animations we want.
We can build animations that run with the same kind of native performance that we're used
to with pure CSS animations. But we can also have our animation logic tightly integrated
with the rest of our application code, where they can be easily triggered and controlled.
.alert.is-helpful
:marked
Angular animations are built on top of the standard [Web Animations API](https://w3c.github.io/web-animations/)
and they run natively on [browsers that support it](http://caniuse.com/#feat=web-animation).
For other browsers, a polyfill is required. Grab
[`web-animations.min.js` from here](https://github.com/web-animations/web-animations-js) and
add it to your page.
A more lightweight polyfill maintained by the Angular team is coming soon.
:marked
# Table of Contents
* [Quickstart Example: Transitioning Between Two States](#example-transitioning-between-states)
* [States and Transitions](#states-and-transitions)
* [Example: Entering and Leaving](#example-entering-and-leaving)
* [Example: Entering and Leaving from Different States](#example-entering-and-leaving-from-different-states)
* [Animatable Properties and Units](#animatable-properties-and-units)
* [Automatic Property Calculation](#automatic-property-calculation)
* [Animation Timing](#animation-timing)
* [Multi-Step Animations with Keyframes](#multi-step-animations-with-keyframes)
* [Parallel Animation Groups](#parallel-animation-groups)
.l-sub-section
:marked
The examples referenced in this chapter are available as a [live example](/resources/live-examples/animations/ts/plnkr.html).
a(id="example-transitioning-between-states")
.l-main-section
:marked
## Quickstart Example: Transitioning Between Two States
figure
img(src="/resources/images/devguide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px" )
:marked
Let's build a simple animation that transitions an element between two states
driven by a model attribute.
Animations are defined inside `@Component` metadata. Before we can add some, we need
to import a few animation-specific functions:
+makeExample('animations/ts/app/hero-list-basic.component.ts', 'imports')(format=".")
:marked
With these we can now define an *animation trigger* called `heroState` in the component
metadata. It has animated transitions between two states: `active` and `inactive`. When a
hero is active, we display a the element in slightly larger size and lighter color.
+makeExample('animations/ts/app/hero-list-basic.component.ts', 'animationdef')(format=".")
.alert.is-helpful
:marked
In this example we are defining animation styles (color and transform) inline in the
animation metadata. In an upcoming release of Angular, support will be added for pulling
the styles in from the component CSS stylesheet instead.
:marked
We now have an animation defined but it is not yet used anywhere. We can change that by
attaching it to one or more elements in the component's template using the "`@triggerName`"
syntax:
+makeExample('animations/ts/app/hero-list-basic.component.ts', 'template')(format=".")
:marked
Here we've applied the animation trigger to every element repeated by an `ngFor`. Each of
the repeated elements will animate independently. We're binding the value of the
attribute to the expression `hero.state`. We expect it to always be either `inactive`
or `active`, since that's what we have defined animation states for.
With this setup, an animated transition is shown whenever a hero object changes state!
Here's the full component implementation:
+makeExample('animations/ts/app/hero-list-basic.component.ts')
:marked
## States and Transitions
Angular animations are defined in terms of logical **states** and **transitions**
between states.
An animation state is a string value that we define in our application code. In the example
above we used the states `'active'` and `'inactive'` based on the logical state of
hero objects. The source of the state can be a simple object attribute as it was in this case,
or it can be a value computed in a method. The important thing is that we can read it into the
component's template.
We can define *styles* for each animation state:
+makeExample('animations/ts/app/hero-list-basic.component.ts', 'states')(format=".")
:marked
These `state` definitions specify the *end styles* of each state.
They are applied to the element once it has transitioned to that state, and will stay
*as long as it remains in that state*. In that sense, we are defining more than just
animations here. We're actually defining what styles the element has in different states.
Once we have states, we can define *transitions* between the states. Each transition
controls the timing of switching between one set of styles and the next:
+makeExample('animations/ts/app/hero-list-basic.component.ts', 'transitions')(format=".")
figure.image-display
img(src="/resources/images/devguide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations we defines states and transitions between states" width="400")
:marked
If we have the same timing configuration for several transitions, we can combine
them into the same `transition` definition:
+makeExample('animations/ts/app/hero-list-combined-transitions.component.ts', 'transitions')(format=".")
:marked
When we have the same timing for both directions of a transition, as we do in the previous
example, we can use the `<=>` shorthand syntax:
+makeExample('animations/ts/app/hero-list-twoway.component.ts', 'transitions')(format=".")
:marked
Sometimes we have styles that we want to apply during an animation but not keep around
after it finishes. We can define such styles inline in the `transition`. In this example,
the element receives one set of styles immediately and is then animated to the next.
When the transition finishes, none of these styles will be kept because they're not
defined in a `state`.
+makeExample('animations/ts/app/hero-list-inline-styles.component.ts', 'transitions')(format=".")
:marked
### The wildcard state `*`
The `*` ("wildcard") state matches *any* animation state. This is useful for defining styles and
transitions that should apply regardless of which state the animation is in. For example:
* The `active => *` transition applies when the element's state changes from `active` to anything else.
* The `* => *` transition applies when *any* change between two states takes place.
figure.image-display
img(src="/resources/images/devguide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400")
:marked
### The `void` state
There's one special state called `void` that may apply to any animation. It applies
when the element is *not* attached to a view. This may be because it has not yet been
added or because it has been removed. The `void` state is useful for defining "enter" and
"leave" animations.
For example the `* => void` transition applies when the element leaves the view,
regardless of what state it was in before it left.
figure.image-display
img(src="/resources/images/devguide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400")
:marked
The wildcard state `*` also matches `void`.
## Example: Entering and Leaving
figure
img(src="/resources/images/devguide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;" )
:marked
Using the `void` and `*` states we can define transitions that animate the
entering and leaving of elements:
* Enter: `void => *`
* Leave: `* => void`
+makeExample('animations/ts/app/hero-list-enter-leave.component.ts', 'animationdef')(format=".")
:marked
Note that in this case we have the styles applied to the void state directly in the
transition definitions, and not in a separate `state(void)` definition. We do this because
we want the transforms to be different on enter and leave: The element enters from the left
and leaves to the right.
## Example: Entering and Leaving from Different States
figure
img(src="/resources/images/devguide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px" )
:marked
We can also combine this animation with the earlier state transition animation by
using the hero state as the animation state. What this will let us do is configure
different transitions for entering and leaving based on what the state of the hero
is:
* Inactive hero enter: `void => inactive`
* Active hero enter: `void => active`
* Inactive hero leave: `active => void`
* Active hero leave: `inactive => void`
We now have fine-grained control over each transition:
figure.image-display
img(src="/resources/images/devguide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400")
+makeExample('animations/ts/app/hero-list-enter-leave-states.component.ts', 'animationdef')(format=".")
:marked
## Animatable Properties and Units
Since Angular's animation support builds on top of Web Animations, we can animate any property
that the browser considers *animatable*. This includes positions, sizes, transforms, colors,
borders and many others. The W3C maintains
[a list of animatable properties](https://www.w3.org/TR/css3-transitions/#animatable-properties).
For positional properties that have a numeric value, we can define a unit by providing
the value as a string with the appropriate suffix:
* `'50px'`
* `'3em'`
* `'100%'`
For most dimensinal properties we can also just define a number which is then assumed to be
in pixels:
* `50` is the same as saying `'50px'`
## Automatic Property Calculation
figure
img(src="/resources/images/devguide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px" )
:marked
Sometimes the value of a dimensional style property that we want to
animate is not known until at runtime. For example, it is quite common for elements
to have widths and heights that depend on their content and the screen size. These
properties are often tricky to animate with CSS.
With Angular we can use a special `*` property value in these cases. What it means
is that the value of this property will be computed at runtime and then plugged into
the animation.
The "leave" animation in this example takes whatever height the element has before it
leaves and animates from that height to zero:
+makeExample('animations/ts/app/hero-list-auto.component.ts', 'animationdef')(format=".")
// Uncomment when the support is added and example works
:marked
## Accessing Styles from Component Stylesheets
In our examples so far we have specified all animated styles right in the
animation metadata. This is usually not what we want to do in anything
but the simplest animations. What we prefer to do instead is define all styles
in [component stylesheets](component-styles.html) and then just pull them into
the animations.
We can do this simply by referencing the classes from the `style()` metadata
in the animations using the `.class` selector notation:
+makeExample('animations/ts/src/hero-list-classes.component.ts', 'animationdef')(format=".")
:marked
## Animation Timing
There are three timing properties we can tune for every animated transition:
The duration, the delay, and the easing function. They are all combined into
a single transition *timing string*.
### Duration
The duration controls how long the animation takes to run from start to finish.
We can define a duration in three ways:
* As a plain number, in milliseconds: `100`
* In a string, as milliseconds: `'100ms'`
* In a string, as seconds: `'0.1s'`
### Delay
The delay controls how long to wait after an animation triggers before the
transition actually begins. We can define one by adding it in the same string
following the duration. It also has the same format options as the duration:
* Wait for 100ms and then run for 200ms: `'0.2s 100ms'`
### Easing
The [easing function](http://easings.net/) controls how the animation accelerates
and decelerates during its runtime. For example, using an `ease-in` function means
the animation begins relatively slowly but then picks up speed as it progresses. We
can control the easing by adding it as a *third* value in the string after the duration
and the delay (or as the *second* value when there is no delay):
* Wait for 100ms and then run for 200ms, with easing: `'0.2s 100ms ease-out'`
* Run for 200ms, with easing: `'0.2s ease-in-out'`
figure
img(src="/resources/images/devguide/animations/animation_timings.gif" alt="Animations with specific timings" align="right" style="width:220px;margin-left:20px" )
:marked
### Example
Here are a couple of custom timings in action. Both "enter" and "leave" last for
200 milliseconds but they have different easings. The leave begins after a
slight delay:
+makeExample('animations/ts/app/hero-list-timings.component.ts', 'animationdef')(format=".")
:marked
## Multi-Step Animations with Keyframes
figure
img(src="/resources/images/devguide/animations/animation_multistep.gif" alt="Animations with some bounce implemented with keyframes" align="right" style="width:220px;margin-left:20px" )
:marked
With animation *keyframes* we can go beyond a simple transition between two
sets of styles to a more intricate animation that goes through one or more
intermediate styles in between.
For each keyframe, we can specify an *offset* that defines at which point
in the animation that keyframe applies. The offset is a number between zero,
which marks the beginning of the animation, and one, which marks the end.
In this example we add some "bounce" to our enter and leave animations with
keyframes:
+makeExample('animations/ts/app/hero-list-multistep.component.ts', 'animationdef')(format=".")
:marked
Note that the offsets are *not* defined in terms of absolute time. They are relative
measures from 0 to 1. The final timeline of the animation will based on the combination
of keyframe offsets, duration, delay, and easing.
Defining offsets for keyframes is optional. If we omit them, offsets with even
spacing are automatically assigned. For example, three keyframes without predefined
offsets will receive offsets `0`, `0.5`, and `1`.
// Uncomment when the support is added and example works
:marked
## Using Stylesheet Keyframes
Earlier we saw how we can put animation styles into component stylesheets and then
pull them into our animations. The same trick can be applied to keyframes: We can
define the relative timeline of the animation with CSS
[@keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes)
and then reference it from the stylesheets.
In this example we define the same animations as we had in the previous section,
but this time using CSS keyframes:
+makeExample('animations/ts/src/hero-list-keyframes.component.ts', 'animationdef')(format=".")
:marked
## Parallel Animation Groups
figure
img(src="/resources/images/devguide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" align="right" style="width:220px;margin-left:20px" )
:marked
We've already seen how we can animate multiple style properties at the same time:
Just put all of them into the same `style()` definition!
But we may also want to configure different *timings* for animations that happen
in parallel. For example, we may want to animate two CSS properties but use a
different easing function for each one.
For this we can use animation *groups*. In this example we use groups both on
enter and leave so that we can use two different timing configurations. Both
are applied to the same element in parallel, but run independent of each other:
+makeExample('animations/ts/app/hero-list-groups.component.ts', 'animationdef')(format=".")
:marked
One group animates the element transform and width. The other animates the opacity.

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 805 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 242 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 304 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB