@progress/kendo-react-animation/Animation.d.ts

React Animation component assists with animating HTML elements. KendoReact Animation package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { default as PropTypes } from 'prop-types';
import { AnimationsClassStructure } from '@progress/kendo-react-common';
import { AnimationInterface } from './AnimationInterface.js';
import * as React from 'react';
/**
 * Represents the props of the [KendoReact Animation component](https://www.telerik.com/kendo-react-ui/components/animation).
 */
export interface AnimationProps extends AnimationInterface {
    /**
     * A function for customizing the rendering of child elements.
     *
     * @example
     * <Animation childFactory={(child) => React.cloneElement(child, { ariaHidden: true })} />
     */
    childFactory?: any;
    /**
     * Specifies the CSS class names to be applied to the Animation container.
     *
     * @example
     * <Animation className="animation-container" />
     */
    className?: string;
    /**
     * Specifies the HTML tag of the parent Animation container.
     *
     * @default "div"
     * @example
     * <Animation component="main" />
     */
    component?: React.ReactNode;
    /**
     * Specifies the `id` attribute of the Animation container.
     *
     * @example
     * <Animation id="animation-container" />
     */
    id?: string;
    /**
     * Specifies the inline styles to be applied to the Animation container.
     *
     * @example
     * <Animation style={{ width: "100%" }} />
     */
    style?: any;
    /**
     * Determines whether child elements will stack on top of each other during the animation.
     *
     * @example
     * <Animation stackChildren={true} />
     */
    stackChildren?: boolean;
    /**
     * Specifies the base class name for the transition.
     *
     * @example
     * <Animation transitionName="fade" />
     */
    transitionName: string;
    /**
     * Specifies the inline styles applied when the Animation is entering.
     *
     * @example
     * <Animation animationEnteringStyle={{ opacity: 0.5 }} />
     */
    animationEnteringStyle?: any;
    /**
     * Specifies the inline styles applied when the Animation has entered.
     *
     * @example
     * <Animation animationEnteredStyle={{ opacity: 1 }} />
     */
    animationEnteredStyle?: any;
    /**
     * Specifies the inline styles applied when the Animation is exiting.
     *
     * @example
     * <Animation animationExitingStyle={{ opacity: 0.5 }} />
     */
    animationExitingStyle?: any;
    /**
     * Specifies the inline styles applied when the Animation has exited.
     *
     * @example
     * <Animation animationExitedStyle={{ opacity: 0 }} />
     */
    animationExitedStyle?: any;
    /**
     * Provides unstyled options for the Animation.
     *
     * @example
     * <Animation unstyled={{ appear: "unstyled-appear" }} />
     */
    unstyled?: AnimationsClassStructure;
}
export declare const Animation: {
    (props: AnimationProps): React.JSX.Element;
    propTypes: {
        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
        childFactory: PropTypes.Requireable<any>;
        className: PropTypes.Requireable<string>;
        component: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        id: PropTypes.Requireable<string>;
        style: PropTypes.Requireable<any>;
        transitionName: PropTypes.Validator<string>;
        appear: PropTypes.Validator<boolean>;
        enter: PropTypes.Validator<boolean>;
        exit: PropTypes.Validator<boolean>;
        transitionEnterDuration: PropTypes.Validator<number>;
        transitionExitDuration: PropTypes.Validator<number>;
    };
};