chore(animation): add more types

This commit is contained in:
Adam Bradley
2016-02-21 10:54:44 -06:00
parent 4cae151d47
commit 7c27bcf6eb

View File

@ -1,4 +1,4 @@
import {CSS, rafFrames, raf, transitionEnd} from '../util/dom'; import {CSS, rafFrames, transitionEnd} from '../util/dom';
import {assign, isDefined} from '../util/util'; import {assign, isDefined} from '../util/util';
@ -7,25 +7,25 @@ import {assign, isDefined} from '../util/util';
**/ **/
export class Animation { export class Animation {
private _parent: Animation; private _parent: Animation;
private _c: Array<Animation>; private _c: Animation[];
private _el: Array<HTMLElement>; private _el: HTMLElement[];
private _opts: AnimationOptions; private _opts: AnimationOptions;
private _fx: {[key: string]: EffectProperty}; private _fx: {[key: string]: EffectProperty};
private _dur: number; private _dur: number;
private _easing: string; private _easing: string;
private _bfSty: any; private _bfSty: { [property: string]: any; };
private _bfAdd: Array<string>; private _bfAdd: string[];
private _bfRmv: Array<string>; private _bfRmv: string[];
private _afSty: any; private _afSty: { [property: string]: any; };
private _afAdd: Array<string>; private _afAdd: string[];
private _afRmv: Array<string>; private _afRmv: string[];
private _pFns: Array<Function>; private _pFns: Function[];
private _fFns: Array<Function>; private _fFns: Function[];
private _fOnceFns: Array<Function>; private _fOnceFns: Function[];
private _wChg: boolean = false; private _wChg: boolean = false;
private _rv: boolean; private _rv: boolean;
private _unregTrans: Function; private _unregTrans: Function;
private _tmr: any; private _tmr: number;
private _lastUpd: number = 0; private _lastUpd: number = 0;
public isPlaying: boolean; public isPlaying: boolean;
@ -63,7 +63,7 @@ export class Animation {
} }
element(ele: any): Animation { element(ele: any): Animation {
var i; var i: number;
if (ele) { if (ele) {
if (Array.isArray(ele)) { if (Array.isArray(ele)) {
@ -133,7 +133,7 @@ export class Animation {
} }
to(prop: string, val: any, clearProperyAfterTransition?: boolean): Animation { to(prop: string, val: any, clearProperyAfterTransition?: boolean): Animation {
var fx = this._addProp('to', prop, val); var fx: EffectProperty = this._addProp('to', prop, val);
if (clearProperyAfterTransition) { if (clearProperyAfterTransition) {
// if this effect is a transform then clear the transform effect // if this effect is a transform then clear the transform effect
@ -149,7 +149,7 @@ export class Animation {
} }
private _addProp(state: string, prop: string, val: any): EffectProperty { private _addProp(state: string, prop: string, val: any): EffectProperty {
var fxProp = this._fx[prop]; var fxProp: EffectProperty = this._fx[prop];
if (!fxProp) { if (!fxProp) {
// first time we've see this EffectProperty // first time we've see this EffectProperty
@ -208,11 +208,11 @@ export class Animation {
this._bfRmv.push(className); this._bfRmv.push(className);
return this; return this;
}, },
setStyles: (styles: any): Animation => { setStyles: (styles: { [property: string]: any; }): Animation => {
this._bfSty = styles; this._bfSty = styles;
return this; return this;
}, },
clearStyles: (propertyNames: Array<string>): Animation => { clearStyles: (propertyNames: string[]): Animation => {
for (var i = 0; i < propertyNames.length; i++) { for (var i = 0; i < propertyNames.length; i++) {
this._bfSty[propertyNames[i]] = ''; this._bfSty[propertyNames[i]] = '';
} }
@ -231,11 +231,11 @@ export class Animation {
this._afRmv.push(className); this._afRmv.push(className);
return this; return this;
}, },
setStyles: (styles: any): Animation => { setStyles: (styles: { [property: string]: any; }): Animation => {
this._afSty = styles; this._afSty = styles;
return this; return this;
}, },
clearStyles: (propertyNames: Array<string>): Animation => { clearStyles: (propertyNames: string[]): Animation => {
for (var i = 0; i < propertyNames.length; i++) { for (var i = 0; i < propertyNames.length; i++) {
this._afSty[propertyNames[i]] = ''; this._afSty[propertyNames[i]] = '';
} }
@ -246,7 +246,7 @@ export class Animation {
play(opts: PlayOptions = {}) { play(opts: PlayOptions = {}) {
var self = this; var self = this;
var i; var i: number;
var duration = isDefined(opts.duration) ? opts.duration : self._dur; var duration = isDefined(opts.duration) ? opts.duration : self._dur;
console.debug('Animation, play, duration', duration, 'easing', self._easing); console.debug('Animation, play, duration', duration, 'easing', self._easing);
@ -386,7 +386,12 @@ export class Animation {
_progress(stepValue: number) { _progress(stepValue: number) {
// bread 'n butter // bread 'n butter
var i, prop, fx, val, transforms, tweenEffect; var i: number;
var prop: string;
var fx: EffectProperty;
var val: any;
var transforms: string[];
var tweenEffect: boolean;
for (i = 0; i < this._c.length; i++) { for (i = 0; i < this._c.length; i++) {
this._c[i]._progress(stepValue); this._c[i]._progress(stepValue);
@ -457,7 +462,8 @@ export class Animation {
} }
_setTrans(duration: number, forcedLinearEasing: boolean) { _setTrans(duration: number, forcedLinearEasing: boolean) {
var i, easing; var i: number;
var easing: string;
// set the TRANSITION properties inline on the element // set the TRANSITION properties inline on the element
for (i = 0; i < this._c.length; i++) { for (i = 0; i < this._c.length; i++) {
@ -479,7 +485,9 @@ export class Animation {
} }
_willChange(addWillChange: boolean) { _willChange(addWillChange: boolean) {
var i, wc, prop; var i: number;
var wc: string[];
var prop: string;
for (i = 0; i < this._c.length; i++) { for (i = 0; i < this._c.length; i++) {
this._c[i]._willChange(addWillChange); this._c[i]._willChange(addWillChange);
@ -505,7 +513,10 @@ export class Animation {
_before() { _before() {
// before the RENDER_DELAY // before the RENDER_DELAY
// before the animations have started // before the animations have started
var i, j, prop, ele; var i: number;
var j: number;
var prop: string;
var ele: HTMLElement;
// stage all of the child animations // stage all of the child animations
for (i = 0; i < this._c.length; i++) { for (i = 0; i < this._c.length; i++) {
@ -536,7 +547,10 @@ export class Animation {
_after() { _after() {
// after the animations have finished // after the animations have finished
var i, j, prop, ele; var i: number;
var j: number;
var prop: string;
var ele: HTMLElement;
for (i = 0; i < this._c.length; i++) { for (i = 0; i < this._c.length; i++) {
this._c[i]._after(); this._c[i]._after();
@ -673,7 +687,7 @@ export class Animation {
_onFinish(hasCompleted: boolean) { _onFinish(hasCompleted: boolean) {
this.isPlaying = false; this.isPlaying = false;
var i; var i: number;
for (i = 0; i < this._fFns.length; i++) { for (i = 0; i < this._fFns.length; i++) {
this._fFns[i](hasCompleted); this._fFns[i](hasCompleted);
@ -693,7 +707,8 @@ export class Animation {
} }
destroy(removeElement?: boolean) { destroy(removeElement?: boolean) {
var i, ele; var i: number;
var ele: HTMLElement;
for (i = 0; i < this._c.length; i++) { for (i = 0; i < this._c.length; i++) {
this._c[i].destroy(removeElement); this._c[i].destroy(removeElement);
@ -711,7 +726,8 @@ export class Animation {
_transEl(): HTMLElement { _transEl(): HTMLElement {
// get the lowest level element that has an Animation // get the lowest level element that has an Animation
var i, targetEl; var i: number;
var targetEl: HTMLElement;
for (i = 0; i < this._c.length; i++) { for (i = 0; i < this._c.length; i++) {
targetEl = this._c[i]._transEl(); targetEl = this._c[i]._transEl();