docs(animations): add documentation for new animation features
This commit is contained in:
@ -9,15 +9,54 @@ import {AnimationMetadata, AnimationOptions} from './animation_metadata';
|
||||
import {AnimationPlayer} from './players/animation_player';
|
||||
|
||||
/**
|
||||
* AnimationBuilder is an injectable service that is available when the {@link
|
||||
* BrowserAnimationsModule BrowserAnimationsModule} or {@link NoopAnimationsModule
|
||||
* NoopAnimationsModule} modules are used within an application.
|
||||
*
|
||||
* The purpose if this service is to produce an animation sequence programmatically within an
|
||||
* angular component or directive.
|
||||
*
|
||||
* Programmatic animations are first built and then a player is created when the build animation is
|
||||
* attached to an element.
|
||||
*
|
||||
* ```ts
|
||||
* // remember to include the BrowserAnimationsModule module for this to work...
|
||||
* import {AnimationBuilder} from '@angular/animations';
|
||||
*
|
||||
* class MyCmp {
|
||||
* constructor(private _builder: AnimationBuilder) {}
|
||||
*
|
||||
* makeAnimation(element: any) {
|
||||
* // first build the animation
|
||||
* const myAnimation = this._builder.build([
|
||||
* style({ width: 0 }),
|
||||
* animate(1000, style({ width: '100px' }))
|
||||
* ]);
|
||||
*
|
||||
* // then create a player from it
|
||||
* const player = myAnimation.create(element);
|
||||
*
|
||||
* player.play();
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* When an animation is built an instance of {@link AnimationFactory AnimationFactory} will be
|
||||
* returned. Using that an {@link AnimationPlayer AnimationPlayer} can be created which can then be
|
||||
* used to start the animation.
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export abstract class AnimationBuilder {
|
||||
abstract build(animation: AnimationMetadata|AnimationMetadata[]): Animation;
|
||||
abstract build(animation: AnimationMetadata|AnimationMetadata[]): AnimationFactory;
|
||||
}
|
||||
|
||||
/**
|
||||
* An instance of `AnimationFactory` is returned from {@link AnimationBuilder#build
|
||||
* AnimationBuilder.build}.
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export abstract class Animation {
|
||||
export abstract class AnimationFactory {
|
||||
abstract create(element: any, options?: AnimationOptions): AnimationPlayer;
|
||||
}
|
||||
|
Reference in New Issue
Block a user