rynex
Version:
A minimalist TypeScript framework for building reactive web applications with no virtual DOM
48 lines • 1.95 kB
TypeScript
/**
* Rynex Animation & Transition Helpers
* Simple, performant animations without external dependencies
*/
export interface TransitionConfig {
duration?: number;
easing?: string;
delay?: number;
onStart?: () => void;
onEnd?: () => void;
}
export interface AnimationConfig extends TransitionConfig {
keyframes: Keyframe[] | PropertyIndexedKeyframes;
iterations?: number;
direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
fill?: 'none' | 'forwards' | 'backwards' | 'both';
}
/**
* Transition wrapper - applies CSS transitions to elements
* Usage: transition(element, { duration: 300, easing: 'ease-in-out' })
*/
export declare function transition(element: HTMLElement, config?: TransitionConfig): HTMLElement;
/**
* Animate - Web Animations API wrapper
* Usage: animate(element, { keyframes: [{ opacity: 0 }, { opacity: 1 }], duration: 300 })
*/
export declare function animate(element: HTMLElement, config: AnimationConfig): Animation | null;
/**
* Fade transition - fade in/out
* Usage: fade(element, 'in', { duration: 300 })
*/
export declare function fade(element: HTMLElement, direction?: 'in' | 'out' | 'toggle', config?: TransitionConfig): Animation | null;
/**
* Slide transition - slide in/out
* Usage: slide(element, 'down', { duration: 300 })
*/
export declare function slide(element: HTMLElement, direction?: 'up' | 'down' | 'left' | 'right', config?: TransitionConfig): Animation | null;
/**
* Scale transition - scale in/out
* Usage: scale(element, 'in', { duration: 300 })
*/
export declare function scale(element: HTMLElement, direction?: 'in' | 'out' | 'toggle', config?: TransitionConfig): Animation | null;
/**
* Rotate transition - rotate element
* Usage: rotate(element, 360, { duration: 300 })
*/
export declare function rotate(element: HTMLElement, degrees?: number, config?: TransitionConfig): Animation | null;
//# sourceMappingURL=animations.d.ts.map