diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
index ed4cd7759a..6458092df2 100644
--- a/core/src/utils/animation/animation.ts
+++ b/core/src/utils/animation/animation.ts
@@ -1,6 +1,47 @@
// TODO: Add validation
// TODO: More tests
+export interface Animation {
+ parentAnimation: Animation | undefined;
+ elements: HTMLElement[];
+ childAnimations: Animation[];
+ beforeAddClasses: string[];
+ beforeRemoveClasses: string[];
+ beforeStylesValue: { [property: string]: any };
+ afterAddClasses: string[];
+ afterRemoveClasses: string[];
+ afterStylesValue: { [property: string]: any };
+
+ parent(animation: Animation): Animation;
+ play(): Animation;
+ pause(): Animation;
+ stop(): Animation;
+ playStep(step: number): Animation;
+ destroy(): Animation;
+ keyframes(keyframes: any[]): Animation;
+ addAnimation(animationToADd: Animation | Animation[] | undefined | null): Animation;
+ addTarget(target: string): Animation;
+ addElement(el: Node | Node[] | NodeList | undefined | null): Animation;
+ iterations(iterations: number): Animation;
+ duration(duration: number): Animation;
+ easing(easing: string): Animation;
+ delay(delay: number): Animation;
+ name(name: string): Animation;
+ getKeyframes(): any[];
+ getDelay(): number | undefined;
+ getIterations(): number | undefined;
+ getEasing(): string | undefined;
+ getDuration(): number | undefined;
+ afterClearStyles(propertyNames: string[]): Animation;
+ afterStyles(styles: { [property: string]: any }): Animation;
+ afterRemoveClass(className: string | string[] | undefined): Animation;
+ afterAddClass(className: string | string[] | undefined): Animation;
+ beforeClearStyles(propertyNames: string[]): Animation;
+ beforeStyles(styles: { [property: string]: any }): Animation;
+ beforeRemoveClass(className: string | string[] | undefined): Animation;
+ beforeAddClass(className: string | string[] | undefined): Animation;
+}
+
const animationEnd = (el: HTMLElement | null, callback: (ev?: TransitionEvent) => void) => {
let unRegTrans: (() => void) | undefined;
const opts: any = { passive: true };
@@ -31,37 +72,8 @@ const animationEnd = (el: HTMLElement | null, callback: (ev?: TransitionEvent) =
return unregister;
};
-const addElement = (animationElements: any[], el: Node | Node[] | NodeList | undefined | null) => {
- if (el != null) {
- const nodeList = el as NodeList;
- if (nodeList.length >= 0) {
- for (let i = 0; i < nodeList.length; i++) {
- animationElements.push((el as any)[i]);
- }
- } else {
- animationElements.push(el);
- }
- }
-};
-
-const addAnimation = (parentAnimation: Animation, childAnimations: Animation[], animationToAdd: Animation | Animation[] | undefined | null) => {
- if (animationToAdd != null) {
- const animationsToAdd = animationToAdd as Animation[];
- if (animationsToAdd.length >= 0) {
- for (const animation of animationsToAdd) {
- animation.parentAnimation = parentAnimation;
- childAnimations.push(animation);
- }
- } else {
- (animationToAdd as Animation).parentAnimation = parentAnimation;
- childAnimations.push(animationToAdd as Animation);
- }
- }
-};
-
-const addTarget = (animationElements: any[], target: string) => {
- const els = document.querySelectorAll(target);
- addElement(animationElements, els);
+const supportsWebAnimations = (): boolean => {
+ return !!(window as any).Animation;
};
const generateKeyframeString = (name: string | undefined, keyframes: any[] = []): string => {
@@ -104,257 +116,309 @@ const addClassToArray = (classes: string[] = [], className: string | string[] |
return classes;
};
-export class Animation {
- private elements: HTMLElement[] = [];
- private childAnimations: Animation[] = [];
+export const createAnimation = (animationNameValue: string | undefined): Animation => {
+ let elements: HTMLElement[] = [];
+ let childAnimations: Animation[] = [];
+ let _name: string | undefined;
+ let _delay: number | undefined;
+ let _duration: number | undefined;
+ let _easing: string | undefined;
+ let _iterations: number | undefined;
- private _delay: number | undefined;
- private _duration: number | undefined;
- private _easing: string | undefined;
- private _iterations: number | undefined;
+ let _keyframes: any[] = [];
+ let _keyframeString = '';
- private _keyframes: any[] = [];
- private _keyframeString = '';
+ let initialized = false;
- private initialized = false;
+ let stylesheet: HTMLElement | undefined;
- private stylesheet?: HTMLElement;
+ let parentAnimation: Animation | undefined;
- parentAnimation: Animation | undefined;
+ let beforeAddClasses: string[] = [];
+ let beforeRemoveClasses: string[] = [];
+ let beforeStylesValue: { [property: string]: any } = {};
- private beforeAddClasses: string[] = [];
- private beforeRemoveClasses: string[] = [];
- private beforeStylesValue: { [property: string]: any } = {};
+ let afterAddClasses: string[] = [];
+ let afterRemoveClasses: string[] = [];
+ let afterStylesValue: { [property: string]: any } = {};
- private afterAddClasses: string[] = [];
- private afterRemoveClasses: string[] = [];
- private afterStylesValue: { [property: string]: any } = {};
-
- constructor(public _name: string | undefined) {}
+ let webAnimations: any[] = [];
/**
* Destroy this animation and all child animations.
*/
- destroy(): Animation {
- this.childAnimations.forEach(childAnimation => {
+ const destroy = (): Animation => {
+ childAnimations.forEach(childAnimation => {
childAnimation.destroy();
});
- this.cleanUp();
+ cleanUp();
- this.elements = [];
- this.childAnimations = [];
+ elements = [];
+ childAnimations = [];
- this.initialized = false;
+ initialized = false;
- return this;
- }
+ return generatePublicAPI();
+ };
- private cleanUp(): void {
- this.cleanUpElements();
- this.cleanUpStyleSheets();
- }
+ const cleanUp = () => {
+ cleanUpElements();
+ cleanUpStyleSheets();
+ };
- private cleanUpElements(): void {
- this.elements.forEach(element => {
- element.style.removeProperty('animation-name');
- element.style.removeProperty('animation-duration');
- element.style.removeProperty('animation-timing-function');
- element.style.removeProperty('animation-iteration-count');
- element.style.removeProperty('animation-delay');
- element.style.removeProperty('animation-play-state');
- });
- }
+ const cleanUpElements = () => {
+ if (supportsWebAnimations()) {
+ webAnimations.forEach(animation => {
+ animation.cancel();
+ });
- private cleanUpStyleSheets() {
- if (this.stylesheet) {
- this.stylesheet.parentNode!.removeChild(this.stylesheet);
- this.stylesheet = undefined;
+ webAnimations = [];
+ } else {
+ elements.forEach(element => {
+ element.style.removeProperty('animation-name');
+ element.style.removeProperty('animation-duration');
+ element.style.removeProperty('animation-timing-function');
+ element.style.removeProperty('animation-iteration-count');
+ element.style.removeProperty('animation-delay');
+ element.style.removeProperty('animation-play-state');
+ });
}
- }
+ };
+
+ const cleanUpStyleSheets = () => {
+ if (stylesheet) {
+ stylesheet.parentNode!.removeChild(stylesheet);
+ stylesheet = undefined;
+ }
+ };
/**
* Add CSS class to this animation's elements
* before the animation begins.
*/
- beforeAddClass(className: string | string[] | undefined): Animation {
- this.beforeAddClasses = addClassToArray(this.beforeAddClasses, className);
+ const beforeAddClass = (className: string | string[] | undefined): Animation => {
+ beforeAddClasses = addClassToArray(beforeAddClasses, className);
- return this;
- }
+ return generatePublicAPI();
+ };
/**
* Remove CSS class from this animation's elements
* before the animation begins.
*/
- beforeRemoveClass(className: string | string[] | undefined): Animation {
- this.beforeRemoveClasses = addClassToArray(this.beforeRemoveClasses, className);
+ const beforeRemoveClass = (className: string | string[] | undefined): Animation => {
+ beforeRemoveClasses = addClassToArray(beforeRemoveClasses, className);
- return this;
- }
+ return generatePublicAPI();
+ };
/**
* Set CSS inline styles to this animation's elements
* before the animation begins.
*/
- beforeStyles(styles: { [property: string]: any } = {}): Animation {
- this.beforeStylesValue = styles;
+ const beforeStyles = (styles: { [property: string]: any } = {}): Animation => {
+ beforeStylesValue = styles;
- return this;
- }
+ return generatePublicAPI();
+ };
/**
* Clear CSS inline styles from this animation's elements
* before the animation begins.
*/
- beforeClearStyles(propertyNames: string[] = []): Animation {
+ const beforeClearStyles = (propertyNames: string[] = []): Animation => {
for (const property of propertyNames) {
- this.beforeStylesValue[property] = '';
+ beforeStylesValue[property] = '';
}
- return this;
- }
+ return generatePublicAPI();
+ };
/**
* Add CSS class to this animation's elements
* after the animation ends.
*/
- afterAddClass(className: string | string[] | undefined): Animation {
- this.afterAddClasses = addClassToArray(this.afterAddClasses, className);
+ const afterAddClass = (className: string | string[] | undefined): Animation => {
+ afterAddClasses = addClassToArray(afterAddClasses, className);
- return this;
- }
+ return generatePublicAPI();
+ };
/**
* Remove CSS class from this animation's elements
* after the animation ends.
*/
- afterRemoveClass(className: string | string[] | undefined): Animation {
- this.afterRemoveClasses = addClassToArray(this.afterRemoveClasses, className);
+ const afterRemoveClass = (className: string | string[] | undefined): Animation => {
+ afterRemoveClasses = addClassToArray(afterRemoveClasses, className);
- return this;
- }
+ return generatePublicAPI();
+ };
/**
* Set CSS inline styles to this animation's elements
* after the animation ends.
*/
- afterStyles(styles: { [property: string]: any } = {}): Animation {
- this.afterStylesValue = styles;
+ const afterStyles = (styles: { [property: string]: any } = {}): Animation => {
+ afterStylesValue = styles;
- return this;
- }
+ return generatePublicAPI();
+ };
/**
* Clear CSS inline styles from this animation's elements
* after the animation ends.
*/
- afterClearStyles(propertyNames: string[] = []): Animation {
+ const afterClearStyles = (propertyNames: string[] = []): Animation => {
for (const property of propertyNames) {
- this.afterStylesValue[property] = '';
+ afterStylesValue[property] = '';
}
- return this;
- }
+ return generatePublicAPI();
+ };
- getEasing(): string | undefined {
- if (this._easing !== undefined) { return this._easing; }
- if (this.parentAnimation) { return this.parentAnimation.getEasing(); }
+ const getEasing = (): string | undefined => {
+ if (_easing !== undefined) { return _easing; }
+ if (parentAnimation) { return parentAnimation.getEasing(); }
return undefined;
- }
+ };
- getDuration(): number | undefined {
- if (this._duration !== undefined) { return this._duration; }
- if (this.parentAnimation) { return this.parentAnimation.getDuration(); }
+ const getDuration = (): number | undefined => {
+ if (_duration !== undefined) { return _duration; }
+ if (parentAnimation) { return parentAnimation.getDuration(); }
return undefined;
- }
+ };
- getIterations(): number | undefined {
- if (this._iterations !== undefined) { return this._iterations; }
- if (this.parentAnimation) { return this.parentAnimation.getIterations(); }
+ const getIterations = (): number | undefined => {
+ if (_iterations !== undefined) { return _iterations; }
+ if (parentAnimation) { return parentAnimation.getIterations(); }
return undefined;
- }
+ };
- getDelay(): number | undefined {
- if (this._delay !== undefined) { return this._delay; }
- if (this.parentAnimation) { return this.parentAnimation.getDelay(); }
+ const getDelay = (): number | undefined => {
+ if (_delay !== undefined) { return _delay; }
+ if (parentAnimation) { return parentAnimation.getDelay(); }
return undefined;
- }
+ };
- getKeyframes(): any[] {
- return this._keyframes;
- }
+ const getKeyframes = (): any[] => {
+ return _keyframes;
+ };
- name(name: string): Animation {
- this._name = name;
+ const name = (animationName: string): Animation => {
+ _name = animationName;
- return this;
- }
+ return generatePublicAPI();
+ };
- delay(delay: number): Animation {
- this._delay = delay;
+ const delay = (animationDelay: number): Animation => {
+ _delay = animationDelay;
- return this;
- }
+ return generatePublicAPI();
+ };
- easing(easing: string): Animation {
- this._easing = easing;
+ const easing = (animationEasing: string): Animation => {
+ _easing = animationEasing;
- return this;
- }
+ return generatePublicAPI();
+ };
- duration(duration: number): Animation {
- this._duration = duration;
+ const duration = (animationDuration: number): Animation => {
+ _duration = animationDuration;
- return this;
- }
+ return generatePublicAPI();
+ };
- iterations(iterations: number): Animation {
- this._iterations = iterations;
+ const iterations = (animationIterations: number): Animation => {
+ _iterations = animationIterations;
- return this;
- }
+ return generatePublicAPI();
+ };
- addElement(el: Node | Node[] | NodeList | undefined | null): Animation {
- addElement(this.elements, el);
+ const parent = (animation: Animation): Animation => {
+ parentAnimation = animation;
- return this;
- }
+ return generatePublicAPI();
+ };
- addTarget(target: string): Animation {
- addTarget(this.elements, target);
+ const addElement = (el: Node | Node[] | NodeList | undefined | null): Animation => {
+ if (el != null) {
+ const nodeList = el as NodeList;
+ if (nodeList.length >= 0) {
+ for (let i = 0; i < nodeList.length; i++) {
+ elements.push((el as any)[i]);
+ }
+ } else {
+ elements.push(el as any);
+ }
+ }
- return this;
- }
+ return generatePublicAPI();
+ };
- addAnimation(childAnimation: Animation | undefined | null): Animation {
- addAnimation(this, this.childAnimations, childAnimation);
+ const addTarget = (target: string): Animation => {
+ const els = document.querySelectorAll(target);
- return this;
- }
+ return addElement(els);
+ };
- keyframes(keyframes: any[]): Animation {
- this._keyframes = keyframes;
- this._keyframeString = generateKeyframeString(this._name, keyframes);
+ const addAnimation = (animationToAdd: Animation | Animation[] | undefined | null): Animation => {
+ if (animationToAdd != null) {
+ const parentAnim = generatePublicAPI();
+ const animationsToAdd = animationToAdd as Animation[];
+ if (animationsToAdd.length >= 0) {
+ for (const animation of animationsToAdd) {
+ animation.parent(parentAnim);
+ childAnimations.push(animation);
+ }
+ } else {
+ (animationToAdd as Animation).parent(parentAnim);
+ childAnimations.push(animationToAdd as Animation);
+ }
+ }
- return this;
- }
+ return generatePublicAPI();
+ };
- private beforeAnimation() {
- this.childAnimations.forEach(childAnimation => {
- childAnimation.beforeAnimation();
+ const keyframes = (keyframeValues: any[]) => {
+ _keyframes = keyframeValues;
+
+ if (!supportsWebAnimations()) {
+ _keyframeString = generateKeyframeString(_name, keyframeValues);
+ }
+
+ return generatePublicAPI();
+ };
+
+ const beforeAnimation = () => {
+ const addClasses = beforeAddClasses;
+ const removeClasses = beforeRemoveClasses;
+ const styles = beforeStylesValue;
+
+ elements.forEach((el: HTMLElement) => {
+ const elementClassList = el.classList;
+
+ elementClassList.add(...addClasses);
+ elementClassList.remove(...removeClasses);
+
+ for (const property in styles) {
+ if (styles.hasOwnProperty(property)) {
+ el.style.setProperty(property, styles[property]);
+ }
+ }
});
+ };
- const elements = this.elements;
- const addClasses = this.beforeAddClasses;
- const removeClasses = this.beforeRemoveClasses;
- const styles = this.beforeStylesValue;
+ const afterAnimation = () => {
+ const addClasses = afterAddClasses;
+ const removeClasses = afterRemoveClasses;
+ const styles = afterStylesValue;
- elements.forEach(el => {
+ elements.forEach((el: HTMLElement) => {
const elementClassList = el.classList;
elementClassList.add(...addClasses);
@@ -367,133 +431,202 @@ export class Animation {
}
});
- animationEnd(elements[0], () => {
- this.afterAnimation();
- });
- }
+ cleanUpElements();
+ };
- private afterAnimation() {
- const elements = this.elements;
- const addClasses = this.afterAddClasses;
- const removeClasses = this.afterRemoveClasses;
- const styles = this.afterStylesValue;
+ const initializeAnimation = () => {
+ beforeAnimation();
- elements.forEach(el => {
- const elementClassList = el.classList;
+ if (supportsWebAnimations()) {
+ console.log('Your browser supports Web Animations');
+ elements.forEach((element, i) => {
+ const animation = element.animate(getKeyframes(), {
+ delay: getDelay(),
+ duration: getDuration(),
+ easing: getEasing(),
+ iterations: getIterations()
+ });
- elementClassList.add(...addClasses);
- elementClassList.remove(...removeClasses);
-
- for (const property in styles) {
- if (styles.hasOwnProperty(property)) {
- el.style.setProperty(property, styles[property]);
+ if (i === 0) {
+ animation.onfinish = () => {
+ afterAnimation();
+ };
}
+
+ console.log(animation);
+ animation.pause();
+
+ webAnimations.push(animation);
+ });
+
+ } else {
+ if (!stylesheet) {
+ stylesheet = createKeyframeStylesheet(_keyframeString);
}
- });
- this.cleanUpElements();
- }
+ const animationDuration = getDuration();
+ const animationEasing = getEasing();
+ const animationIterationCount = getIterations();
+ const animationDelay = getDelay();
- private initializeAnimation(): void {
- this.beforeAnimation();
+ elements.forEach(element => {
+ if (_name !== undefined) {
+ (element as HTMLElement).style.animationName = _name;
+ }
- if (!this.stylesheet) {
- this.stylesheet = createKeyframeStylesheet(this._keyframeString);
+ if (animationDuration !== undefined) {
+ (element as HTMLElement).style.animationDuration = `${animationDuration}ms`;
+ }
+
+ if (animationEasing !== undefined) {
+ (element as HTMLElement).style.animationTimingFunction = animationEasing;
+ }
+
+ if (animationIterationCount !== undefined) {
+ (element as HTMLElement).style.animationIterationCount = (animationIterationCount === Infinity) ? 'infinite' : animationIterationCount.toString();
+ }
+
+ if (animationDelay !== undefined) {
+ (element as HTMLElement).style.animationDelay = `${animationDelay}ms`;
+ }
+ });
+
+ animationEnd(elements[0], () => {
+ afterAnimation();
+ });
}
- const animationName = this._name;
- const animationDuration = this.getDuration();
- const animationEasing = this.getEasing();
- const animationIterationCount = this.getIterations();
- const animationDelay = this.getDelay();
+ initialized = true;
+ };
- this.elements.forEach(element => {
- if (animationName !== undefined) {
- (element as HTMLElement).style.animationName = animationName;
- }
-
- if (animationDuration !== undefined) {
- (element as HTMLElement).style.animationDuration = `${animationDuration}ms`;
- }
-
- if (animationEasing !== undefined) {
- (element as HTMLElement).style.animationTimingFunction = animationEasing;
- }
-
- if (animationIterationCount !== undefined) {
- (element as HTMLElement).style.animationIterationCount = (animationIterationCount === Infinity) ? 'infinite' : animationIterationCount.toString();
- }
-
- if (animationDelay !== undefined) {
- (element as HTMLElement).style.animationDelay = `${animationDelay}ms`;
- }
- });
-
- this.initialized = true;
- }
-
- playStep(step: number): Animation {
- this.childAnimations.forEach(animation => {
+ const playStep = (step: number): Animation => {
+ childAnimations.forEach(animation => {
animation.playStep(step);
});
- if (!this.initialized) {
- this.initializeAnimation();
+ if (!initialized) {
+ initializeAnimation();
}
- this.pause();
+ pause();
- if (this.getDuration() !== undefined) {
- const animationDuration = `-${this.getDuration()! * step}ms`;
+ if (getDuration() !== undefined) {
+ if (supportsWebAnimations()) {
+ webAnimations.forEach(animation => {
+ animation.currentTime = animation.effect.getComputedTiming().delay + (getDuration()! * step);
+ });
+ } else {
+ const animationDuration = `-${getDuration()! * step}ms`;
- this.elements.forEach(element => {
- (element as HTMLElement).style.animationDelay = animationDuration;
- });
+ elements.forEach(element => {
+ (element as HTMLElement).style.animationDelay = animationDuration;
+ });
+ }
}
- return this;
- }
+ return generatePublicAPI();
+ };
- pause(): Animation {
- this.childAnimations.forEach(animation => {
+ const pause = (): Animation => {
+ childAnimations.forEach(animation => {
animation.pause();
});
- if (this.initialized) {
- this.elements.forEach(element => {
- (element as HTMLElement).style.animationPlayState = 'paused';
- });
+ if (initialized) {
+ if (supportsWebAnimations()) {
+ webAnimations.forEach(animation => {
+ animation.pause();
+ });
+ } else {
+ elements.forEach(element => {
+ (element as HTMLElement).style.animationPlayState = 'paused';
+ });
+ }
}
- return this;
- }
+ return generatePublicAPI();
+ };
- play(): Animation {
- this.childAnimations.forEach(animation => {
+ const play = (): Animation => {
+ childAnimations.forEach(animation => {
animation.play();
});
- if (!this.initialized) {
- this.initializeAnimation();
+ if (!initialized) {
+ initializeAnimation();
}
- this.elements.forEach(element => {
- (element as HTMLElement).style.animationPlayState = 'running';
- });
+ if (supportsWebAnimations()) {
+ webAnimations.forEach(animation => {
+ animation.play();
+ });
+ } else {
+ elements.forEach(element => {
+ (element as HTMLElement).style.animationPlayState = 'running';
+ });
+ }
- return this;
- }
+ return generatePublicAPI();
+ };
- stop(): Animation {
- this.childAnimations.forEach(animation => {
+ const stop = (): Animation => {
+ childAnimations.forEach(animation => {
animation.stop();
});
- if (this.initialized) {
- this.cleanUp();
- this.initialized = false;
+ if (initialized) {
+ cleanUp();
+ initialized = false;
}
- return this;
+ return generatePublicAPI();
+ };
+
+ const generatePublicAPI = (): Animation => {
+ return {
+ parentAnimation,
+ elements,
+ childAnimations,
+ beforeAddClasses,
+ beforeRemoveClasses,
+ beforeStylesValue,
+ afterAddClasses,
+ afterRemoveClasses,
+ afterStylesValue,
+ parent,
+ play,
+ pause,
+ stop,
+ playStep,
+ destroy,
+ keyframes,
+ addAnimation,
+ addTarget,
+ addElement,
+ iterations,
+ duration,
+ easing,
+ delay,
+ name,
+ getKeyframes,
+ getDelay,
+ getIterations,
+ getEasing,
+ getDuration,
+ afterClearStyles,
+ afterStyles,
+ afterRemoveClass,
+ afterAddClass,
+ beforeClearStyles,
+ beforeStyles,
+ beforeRemoveClass,
+ beforeAddClass,
+ };
+ };
+
+ if (animationNameValue !== undefined) {
+ name(animationNameValue);
}
-}
+
+ return generatePublicAPI();
+};
diff --git a/core/src/utils/animation/test/animation.spec.ts b/core/src/utils/animation/test/animation.spec.ts
index 972e1a6d1e..6c470038ac 100644
--- a/core/src/utils/animation/test/animation.spec.ts
+++ b/core/src/utils/animation/test/animation.spec.ts
@@ -1,11 +1,11 @@
-import { Animation } from '../animation';
+import { createAnimation } from '../animation';
describe('Animation Class', () => {
describe('addElement()', () => {
let animation;
beforeEach(() => {
- animation = new Animation();
+ animation = createAnimation();
});
it('should add 1 element', () => {
@@ -41,7 +41,7 @@ describe('Animation Class', () => {
describe('addTarget()', () => {
let animation;
beforeEach(() => {
- animation = new Animation();
+ animation = createAnimation();
document.body.innerHTML = '';
});
@@ -78,24 +78,20 @@ describe('Animation Class', () => {
describe('addAnimation()', () => {
let animation;
beforeEach(() => {
- animation = new Animation();
+ animation = createAnimation();
});
it('should add 1 animation', () => {
- const newAnimation = new Animation();
+ const newAnimation = createAnimation();
animation.addAnimation(newAnimation);
expect(animation.childAnimations.length).toEqual(1);
- expect(animation.childAnimations[0].parentAnimation).toEqual(animation);
});
it('should add multiple animations', () => {
- animation.addAnimation([new Animation(), new Animation(), new Animation()]);
+ animation.addAnimation([createAnimation(), createAnimation(), createAnimation()]);
expect(animation.childAnimations.length).toEqual(3);
- expect(animation.childAnimations[0].parentAnimation).toEqual(animation);
- expect(animation.childAnimations[1].parentAnimation).toEqual(animation);
- expect(animation.childAnimations[2].parentAnimation).toEqual(animation);
});
it('should not error when trying to add null or undefined', () => {
@@ -109,7 +105,7 @@ describe('Animation Class', () => {
describe('keyframes()', () => {
let animation;
beforeEach(() => {
- animation = new Animation('my-animation');
+ animation = createAnimation('my-animation');
});
it('should generate a keyframe', () => {
@@ -119,18 +115,18 @@ describe('Animation Class', () => {
{ transform: 'scale(0)', opacity: 0, offset: 1 }
]);
- expect(animation._keyframes.length).toEqual(3);
+ expect(animation.getKeyframes().length).toEqual(3);
});
});
describe('Before and After Animation Methods', () => {
let animation;
beforeEach(() => {
- animation = new Animation();
+ animation = createAnimation();
});
it('should register all "before" styles', () => {
- animation.beforeStyles({ 'background': 'red', 'opacity': 1 });
+ animation = animation.beforeStyles({ 'background': 'red', 'opacity': 1 });
expect(Object.keys(animation.beforeStylesValue).length).toEqual(2);
});
@@ -138,8 +134,8 @@ describe('Animation Class', () => {
const classesToAdd = ['my-class', 'hello-world'];
const classesToRemove = ['ionic-framework'];
- animation.beforeAddClass(classesToAdd);
- animation.beforeRemoveClass(classesToRemove);
+ animation = animation.beforeAddClass(classesToAdd);
+ animation = animation.beforeRemoveClass(classesToRemove);
expect(animation.beforeAddClasses.length).toEqual(classesToAdd.length);
expect(animation.beforeRemoveClasses.length).toEqual(classesToRemove.length);
@@ -149,16 +145,16 @@ describe('Animation Class', () => {
const classesToAdd = 'my-class';
const classesToRemove = 'ionic-framework';
- animation.beforeAddClass(classesToAdd);
- animation.beforeRemoveClass(classesToRemove);
+ animation = animation.beforeAddClass(classesToAdd);
+ animation = animation.beforeRemoveClass(classesToRemove);
expect(animation.beforeAddClasses.length).toEqual(1);
expect(animation.beforeRemoveClasses.length).toEqual(1);
});
it('should not register "before" classes given undefined', () => {
- animation.beforeAddClass(undefined);
- animation.beforeRemoveClass(undefined);
+ animation = animation.beforeAddClass(undefined);
+ animation = animation.beforeRemoveClass(undefined);
expect(animation.beforeAddClasses.length).toEqual(0);
expect(animation.beforeRemoveClasses.length).toEqual(0);
@@ -191,7 +187,7 @@ describe('Animation Class', () => {
});
it('should register all "after" styles', () => {
- animation.afterStyles({ 'background': 'red', 'opacity': 1 });
+ animation = animation.afterStyles({ 'background': 'red', 'opacity': 1 });
expect(Object.keys(animation.afterStylesValue).length).toEqual(2);
});
@@ -199,8 +195,8 @@ describe('Animation Class', () => {
const classesToAdd = ['my-class', 'hello-world'];
const classesToRemove = ['ionic-framework'];
- animation.afterAddClass(classesToAdd);
- animation.afterRemoveClass(classesToRemove);
+ animation = animation.afterAddClass(classesToAdd);
+ animation = animation.afterRemoveClass(classesToRemove);
expect(animation.afterAddClasses.length).toEqual(classesToAdd.length);
expect(animation.afterRemoveClasses.length).toEqual(classesToRemove.length);
@@ -210,16 +206,16 @@ describe('Animation Class', () => {
const classesToAdd = 'my-class';
const classesToRemove = 'ionic-framework';
- animation.afterAddClass(classesToAdd);
- animation.afterRemoveClass(classesToRemove);
+ animation = animation.afterAddClass(classesToAdd);
+ animation = animation.afterRemoveClass(classesToRemove);
expect(animation.afterAddClasses.length).toEqual(1);
expect(animation.afterRemoveClasses.length).toEqual(1);
});
it('should not register "after" classes given undefined', () => {
- animation.afterAddClass(undefined);
- animation.afterRemoveClass(undefined);
+ animation = animation.afterAddClass(undefined);
+ animation = animation.afterRemoveClass(undefined);
expect(animation.afterAddClasses.length).toEqual(0);
expect(animation.afterRemoveClasses.length).toEqual(0);
@@ -270,7 +266,7 @@ describe('Animation Class', () => {
describe('Animation Config Methods', () => {
let animation;
beforeEach(() => {
- animation = new Animation();
+ animation = createAnimation();
});
it('should get undefined when easing not set', () => {
@@ -278,7 +274,7 @@ describe('Animation Class', () => {
});
it('should get parent easing when child easing is not set', () => {
- const childAnimation = new Animation();
+ const childAnimation = createAnimation();
animation.addAnimation(childAnimation);
childAnimation.easing('linear');
@@ -286,7 +282,7 @@ describe('Animation Class', () => {
});
it('should get prefer child easing over parent easing', () => {
- const childAnimation = new Animation();
+ const childAnimation = createAnimation();
childAnimation.easing('linear');
animation.addAnimation(childAnimation);
@@ -300,7 +296,7 @@ describe('Animation Class', () => {
});
it('should get parent duration when child duration is not set', () => {
- const childAnimation = new Animation();
+ const childAnimation = createAnimation();
animation.addAnimation(childAnimation);
childAnimation.duration(500);
@@ -308,7 +304,7 @@ describe('Animation Class', () => {
});
it('should get prefer child duration over parent duration', () => {
- const childAnimation = new Animation();
+ const childAnimation = createAnimation();
childAnimation.duration(500);
animation.addAnimation(childAnimation);
@@ -322,7 +318,7 @@ describe('Animation Class', () => {
});
it('should get parent delay when child delay is not set', () => {
- const childAnimation = new Animation();
+ const childAnimation = createAnimation();
animation.addAnimation(childAnimation);
childAnimation.delay(500);
@@ -330,7 +326,7 @@ describe('Animation Class', () => {
});
it('should get prefer child delay over parent delay', () => {
- const childAnimation = new Animation();
+ const childAnimation = createAnimation();
childAnimation.delay(500);
animation.addAnimation(childAnimation);
@@ -344,7 +340,7 @@ describe('Animation Class', () => {
});
it('should get parent iterations when child iterations is not set', () => {
- const childAnimation = new Animation();
+ const childAnimation = createAnimation();
animation.addAnimation(childAnimation);
childAnimation.iterations(2);
@@ -352,7 +348,7 @@ describe('Animation Class', () => {
});
it('should get prefer child iterations over parent iterations', () => {
- const childAnimation = new Animation();
+ const childAnimation = createAnimation();
childAnimation.iterations(2);
animation.addAnimation(childAnimation);
diff --git a/core/src/utils/animation/test/basic/index.html b/core/src/utils/animation/test/basic/index.html
index 032d5ae9b2..0f1ce344d9 100644
--- a/core/src/utils/animation/test/basic/index.html
+++ b/core/src/utils/animation/test/basic/index.html
@@ -12,11 +12,9 @@