CSS Animation

import anim from 'css-animation';

import { isCssAnimationSupported, Event } from 'css-animation';

import anim, { isCssAnimationSupported, Event } from 'css-animation';

const anim = require('css-animation');
const { isCssAnimationSupported, Event } = require('css-animation');

import anim from 'css-animation';

const element = document.getElementById('myElement');

// Simple class-based animation
anim(element, 'fade-in', () => {
  console.log('Animation completed');
});

// Object-based animation configuration
anim(element, {
  name: 'slide-up',
  active: 'slide-up-active'
}, {
  start: () => console.log('Animation started'),
  active: () => console.log('Active class added'),
  end: () => console.log('Animation ended')
});

// Style-based animation
anim.style(element, { opacity: 0.5 }, () => {
  console.log('Style animation completed');
});

/**
 * Main animation function that applies CSS class-based animations to DOM elements
 * @param node - The target DOM element to animate
 * @param transitionName - Animation class name (string) or configuration object
 * @param endCallback - Function called when animation ends, or object with lifecycle callbacks
 * @returns Object with stop() method to halt animation
 */
function cssAnimation(
  node: Element,
  transitionName: string | AnimationConfig,
  endCallback?: Function | CallbackConfig
): AnimationControl;

interface AnimationConfig {
  /** Base CSS class name to apply */
  name: string;
  /** Active CSS class name (usually name + '-active') */
  active: string;
}

interface CallbackConfig {
  /** Called immediately when animation starts */
  start?: Function;
  /** Called when active class is added (after 30ms delay) */
  active?: Function;
  /** Called when animation completes */
  end?: Function;
}

interface AnimationControl {
  /** Stops the animation and cleans up listeners */
  stop(): void;
}

import anim from 'css-animation';

// String-based animation (auto-generates active class)
const control = anim(element, 'fade-in', () => {
  console.log('Animation finished');
});

// Object-based animation configuration
anim(element, {
  name: 'slide-down',
  active: 'slide-down-active'
}, {
  start: () => console.log('Starting animation'),
  active: () => console.log('Active phase started'),
  end: () => console.log('Animation complete')
});

// Stop animation manually
control.stop();

/**
 * Applies CSS style-based animations by directly setting style properties
 * @param node - Target DOM element
 * @param style - CSS style properties to animate (key-value pairs)
 * @param callback - Function called when animation completes
 */
function style(
  node: Element,
  style: Record<string, string>,
  callback?: Function
): void;

/**
 * Sets CSS transition properties with cross-browser vendor prefixes
 * @param node - Target DOM element
 * @param property - CSS property name, or transition value when used in shorthand form
 * @param value - Transition value (duration, timing function, etc.) - omit when using shorthand
 */
function setTransition(
  node: Element,
  property: string,
  value?: string
): void;

import anim from 'css-animation';

// Style-based animation
anim.style(element, {
  opacity: '0.5',
  transform: 'translateX(100px)'
}, () => {
  console.log('Style animation completed');
});

// Set transition properties
anim.setTransition(element, 'opacity', '300ms ease-in-out');
anim.setTransition(element, 'all 200ms linear'); // shorthand form
anim.setTransition(element, ''); // clear all transitions

/**
 * Event utilities for handling CSS animation and transition events across browsers
 */
interface TransitionEvents {
  /** Array of detected CSS animation/transition start event names */
  startEvents: string[];
  /** Array of detected CSS animation/transition end event names */
  endEvents: string[];
  
  /**
   * Adds event listeners for CSS animation/transition start events
   * @param node - Target DOM element
   * @param eventListener - Function to call when start events fire
   */
  addStartEventListener(node: Element, eventListener: Function): void;
  
  /**
   * Removes event listeners for CSS animation/transition start events
   * @param node - Target DOM element
   * @param eventListener - Function to remove
   */
  removeStartEventListener(node: Element, eventListener: Function): void;
  
  /**
   * Adds event listeners for CSS animation/transition end events
   * @param node - Target DOM element
   * @param eventListener - Function to call when end events fire
   */
  addEndEventListener(node: Element, eventListener: Function): void;
  
  /**
   * Removes event listeners for CSS animation/transition end events
   * @param node - Target DOM element
   * @param eventListener - Function to remove
   */
  removeEndEventListener(node: Element, eventListener: Function): void;
}

import { Event } from 'css-animation';

// Listen for animation/transition start
Event.addStartEventListener(element, (e) => {
  console.log('Animation/transition started');
});

// Listen for animation/transition end
Event.addEndEventListener(element, (e) => {
  console.log('Animation/transition ended');
});

// Check supported events
console.log('Start events:', Event.startEvents);
console.log('End events:', Event.endEvents);

/**
 * Creates a ClassList instance for DOM class manipulation
 * @param el - Target DOM element
 * @returns ClassList instance with chainable methods
 */
function classes(el: Element): ClassList;

interface ClassList {
  /**
   * Adds CSS class to element
   * @param name - Class name to add
   * @returns ClassList instance for chaining
   */
  add(name: string): ClassList;
  
  /**
   * Removes CSS class from element, supports RegExp
   * @param name - Class name to remove or RegExp pattern
   * @returns ClassList instance for chaining
   */
  remove(name: string | RegExp): ClassList;
  
  /**
   * Toggles CSS class on element
   * @param name - Class name to toggle
   * @param force - Optional boolean to force add/remove
   * @returns ClassList instance for chaining
   */
  toggle(name: string, force?: boolean): ClassList;
  
  /**
   * Checks if element has specified CSS class
   * @param name - Class name to check
   * @returns True if class exists
   */
  has(name: string): boolean;
  
  /**
   * Alias for has() method
   */
  contains(name: string): boolean;
  
  /**
   * Returns array of all CSS classes on element
   * @returns Array of class names
   */
  array(): string[];
}

/**
 * Boolean constant indicating whether CSS animations are supported in the current browser
 */
const isCssAnimationSupported: boolean;

import { isCssAnimationSupported } from 'css-animation';

if (isCssAnimationSupported) {
  // Use CSS animations
  anim(element, 'fade-in');
} else {
  // Fallback for older browsers
  element.style.opacity = '1';
}