mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
feat(animation): add animation utility (#18918)
* Add new keyframes proof of concept * update esm import * add base before and after methods, add tests * add base before and after hooks * update clean up methods, add tests * add web animations support, change to arrow functions * remove console logs * add from, to, fromTo, and other properties * add more tests, fix onFinish functionality, being testing with nav transitions * add progress methods, use force linear * run linter * Add playSync * integrate animations with framework components * onFinish now supports multiple callbacks * change const to let * testing reverse * add support for both animation utilities * bug fix * export createAnimation, a few tweaks * add base tests * fix issue with onFinish being called out of order. added tests * fix race conditions in tests * clean up * fix bug where onFinish not calling for empty elements array, update test * clean up * fix treeshaking, remove old comments * remove old tests * Add test for animationbuilder backwards compat * update typings for menu controller * mock web animations in tests * run build * fix type errors * sync with master * use requestAnimationFrame instead of writeTask * fix flaky tests, fix menu * fix ordering * update webdriver * fix wrong version * Revert "fix wrong version" This reverts commit be91296e9701399f8d784b08d09a3c475ca15df7. Revert chromedriver update * Revert "update webdriver" This reverts commit e49bc9d76e335a0af5828725065399bd6795fa37. Revert chromedriver update * expose raw animation object, add tests * add stylesheet recycling * finalize before and after hook tests * a few styling changes * fix lint warnings * get rid of old code * Fix progressStep overflow bug * disable reuse stylesheet * small updates * fix old animation create * setStyleProperty helper * reuse keyframe styles * keyframes * fix css animation issue with display: none, add tests * add comment * fix issue with progress animations and css animations * clean up * clean up pt2 * fix tests * fix linter * add fill for overlays * fix swipe to go back * clean up css animations when done * fix edge cases with css animations * fix menu open and close * add reset function * clean up reset fn * Fix issue where animation always being reset * allow updating animations on the fly * add clear onfinish method * fix linter * add callback options, expand force direction * ensure opts is defined * fix css animations open and close for menus * remove test * add extra check * clean up * fix css anim bug swipe to go back * fix pause * setup alt animation to avoid flickering * clean up * reset flags on destroy * add ability to change duration on progressEnd * fix flicker on duration change for css animations * fix ios transition * remove unneeded recursion * increase durability of updating css animations on the fly * fix gesture anim * fix web anim as well. more work for cleanup * simplify progressEnd for css animations * fix swipe to go back race condition * clean up * Add todo * fix one more bug
This commit is contained in:
Liam DeBeasi
@ -1,64 +1,71 @@
|
||||
|
||||
export interface AnimationController {
|
||||
create(animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise<Animation>;
|
||||
}
|
||||
|
||||
export interface Animation {
|
||||
new (): any;
|
||||
parent: Animation | undefined;
|
||||
hasChildren: boolean;
|
||||
addElement(el: Node | Node[] | NodeList): Animation;
|
||||
add(childAnimation: Animation): Animation;
|
||||
duration(milliseconds: number): Animation;
|
||||
easing(name: string): Animation;
|
||||
easingReverse(name: string): Animation;
|
||||
getDuration(opts?: PlayOptions): number;
|
||||
getEasing(): string;
|
||||
from(prop: string, val: any): Animation;
|
||||
to(prop: string, val: any, clearProperyAfterTransition?: boolean): Animation;
|
||||
fromTo(prop: string, fromVal: any, toVal: any, clearProperyAfterTransition?: boolean): Animation;
|
||||
beforeAddClass(className: string): Animation;
|
||||
beforeRemoveClass(className: string): Animation;
|
||||
beforeStyles(styles: { [property: string]: any; }): Animation;
|
||||
beforeClearStyles(propertyNames: string[]): Animation;
|
||||
beforeAddRead(domReadFn: () => void): Animation;
|
||||
beforeAddWrite(domWriteFn: () => void): Animation;
|
||||
afterAddClass(className: string): Animation;
|
||||
afterRemoveClass(className: string): Animation;
|
||||
afterStyles(styles: { [property: string]: any; }): Animation;
|
||||
parentAnimation: Animation | undefined;
|
||||
elements: HTMLElement[];
|
||||
childAnimations: Animation[];
|
||||
|
||||
animationFinish(): void;
|
||||
play(): Animation;
|
||||
playAsync(): Promise<Animation>;
|
||||
playSync(): Animation;
|
||||
pause(): Animation;
|
||||
stop(): Animation;
|
||||
destroy(): Animation;
|
||||
|
||||
progressStart(forceLinearEasing: boolean): Animation;
|
||||
progressStep(step: number): Animation;
|
||||
progressEnd(shouldComplete: boolean, step: number, dur: number | undefined): Animation;
|
||||
|
||||
from(property: string, value: any): Animation;
|
||||
to(property: string, value: any): Animation;
|
||||
fromTo(property: string, fromValue: any, toValue: any): Animation;
|
||||
keyframes(keyframes: any[]): Animation;
|
||||
|
||||
addAnimation(animationToADd: Animation | Animation[] | undefined | null): Animation;
|
||||
addElement(el: Element | Element[] | Node | Node[] | NodeList | undefined | null): Animation;
|
||||
iterations(iterations: number): Animation;
|
||||
fill(fill: AnimationFill | undefined): Animation;
|
||||
direction(direction: AnimationDirection | undefined): Animation;
|
||||
duration(duration: number): Animation;
|
||||
easing(easing: string): Animation;
|
||||
delay(delay: number): Animation;
|
||||
parent(animation: Animation): Animation;
|
||||
update(deep: boolean): Animation;
|
||||
|
||||
getKeyframes(): any[];
|
||||
getDirection(): AnimationDirection | undefined;
|
||||
getFill(): AnimationFill | undefined;
|
||||
getDelay(): number | undefined;
|
||||
getIterations(): number | undefined;
|
||||
getEasing(): string | undefined;
|
||||
getDuration(): number | undefined;
|
||||
getWebAnimations(): any[];
|
||||
|
||||
afterAddRead(readFn: () => void): Animation;
|
||||
afterAddWrite(writeFn: () => void): Animation;
|
||||
afterClearStyles(propertyNames: string[]): Animation;
|
||||
play(opts?: PlayOptions): void;
|
||||
playSync(): void;
|
||||
playAsync(opts?: PlayOptions): Promise<Animation>;
|
||||
reverse(shouldReverse?: boolean): Animation;
|
||||
stop(stepValue?: number): void;
|
||||
progressStart(): void;
|
||||
progressStep(stepValue: number): void;
|
||||
progressEnd(shouldComplete: boolean, currentStepValue: number, dur: number): void;
|
||||
onFinish(callback: (animation?: Animation) => void, opts?: {oneTimeCallback?: boolean, clearExistingCallbacks?: boolean}): Animation;
|
||||
destroy(): void;
|
||||
isRoot(): boolean;
|
||||
hasCompleted: boolean;
|
||||
afterStyles(styles: { [property: string]: any }): Animation;
|
||||
afterRemoveClass(className: string | string[] | undefined): Animation;
|
||||
afterAddClass(className: string | string[] | undefined): Animation;
|
||||
|
||||
beforeAddRead(readFn: () => void): Animation;
|
||||
beforeAddWrite(writeFn: () => void): Animation;
|
||||
beforeClearStyles(propertyNames: string[]): Animation;
|
||||
beforeStyles(styles: { [property: string]: any }): Animation;
|
||||
beforeRemoveClass(className: string | string[] | undefined): Animation;
|
||||
beforeAddClass(className: string | string[] | undefined): Animation;
|
||||
|
||||
onFinish(callback: any): Animation;
|
||||
clearOnFinish(): Animation;
|
||||
}
|
||||
|
||||
export type AnimationBuilder = (Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>;
|
||||
|
||||
export interface PlayOptions {
|
||||
duration?: number;
|
||||
promise?: boolean;
|
||||
export interface AnimationOnFinishCallback {
|
||||
callback: (didComplete: boolean, animation: Animation) => void;
|
||||
opts: AnimationOnFinishOptions;
|
||||
}
|
||||
|
||||
export interface EffectProperty {
|
||||
effectName: string;
|
||||
trans: boolean;
|
||||
wc?: string;
|
||||
to?: EffectState;
|
||||
from?: EffectState;
|
||||
[state: string]: any;
|
||||
export interface AnimationOnFinishOptions {
|
||||
oneTime: boolean;
|
||||
}
|
||||
|
||||
export interface EffectState {
|
||||
val: any;
|
||||
num: number;
|
||||
effectUnit: string;
|
||||
}
|
||||
export type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
|
||||
export type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';
|
||||
|
||||
Reference in New Issue
Block a user