docs(animate): add animations documentation
|
@ -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()
|
||||
);
|
||||
}
|
||||
|
||||
});
|
|
@ -0,0 +1 @@
|
|||
**/*.js
|
|
@ -0,0 +1 @@
|
|||
This example folder is in a WIP state as Animations are not merged into Angular yet.
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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);
|
||||
}
|
|
@ -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) { }
|
||||
}
|
|
@ -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));
|
|
@ -0,0 +1,4 @@
|
|||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
import { HeroTeamBuilderComponent } from './hero-team-builder.component';
|
||||
|
||||
bootstrap(HeroTeamBuilderComponent);
|
|
@ -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>
|
|
@ -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>
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"description": "Angular 2 Animations",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js"
|
||||
]
|
||||
}
|
|
@ -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."
|
||||
|
|
|
@ -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.
|
After Width: | Height: | Size: 224 KiB |
After Width: | Height: | Size: 164 KiB |
After Width: | Height: | Size: 221 KiB |
After Width: | Height: | Size: 805 KiB |
After Width: | Height: | Size: 242 KiB |
After Width: | Height: | Size: 304 KiB |
After Width: | Height: | Size: 225 KiB |
After Width: | Height: | Size: 39 KiB |
After Width: | Height: | Size: 64 KiB |
After Width: | Height: | Size: 70 KiB |
After Width: | Height: | Size: 50 KiB |