@progress/kendo-react-animation/AnimationInterface.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 { AnimationChildHandle } from './AnimationChild.js';
/**
 * The arguments that are passed to the life-cycle hooks.
 */
export interface AnimationEventArguments {
    /**
     * The element that is currently being animated.
     */
    animatedElement: HTMLElement;
    /**
     * The AnimationChild component which controls the animation.
     */
    target: AnimationChildHandle;
}
/**
 * Inherited by all animations. Represents the properties you can set to an Animation.
 */
export interface AnimationInterface {
    /**
     * @hidden
     */
    children?: React.ReactNode;
    /**
     * Specifies the CSS class names that are set to each of the animated children elements.
     */
    componentChildClassName?: string;
    /**
     * Specifies the styles that are set to each of the animated children elements.
     */
    componentChildStyle?: any;
    /**
     * Called when you add a component to an existing Animation component and the Animation has not started yet ([more information and example](https://www.telerik.com/kendo-react-ui/components/animation/hooks#toc-adding-child-elements)).
     */
    onEnter?: (event: AnimationEventArguments) => void;
    /**
     * Called when you add a component to an existing Animation component and the Animation is now happening ([more information and example](https://www.telerik.com/kendo-react-ui/components/animation/hooks#toc-adding-child-elements)).
     */
    onEntering?: (event: AnimationEventArguments) => void;
    /**
     * Called when you add a component to an existing Animation component and the Animation is now finished ([more information and example](https://www.telerik.com/kendo-react-ui/components/animation/hooks#toc-adding-child-elements)).
     */
    onEntered?: (event: AnimationEventArguments) => void;
    /**
     * An event called after the Animation has reached its exit state ([more information and example](https://www.telerik.com/kendo-react-ui/components/animation/hooks#toc-removing-child-elements)).
     */
    onExit?: (event: AnimationEventArguments) => void;
    /**
     * An event called after the Animation has reached its exiting state ([more information and example](https://www.telerik.com/kendo-react-ui/components/animation/hooks#toc-removing-child-elements)).
     */
    onExiting?: (event: AnimationEventArguments) => void;
    /**
     * An event called after the Animation has reached its exited state ([more information and example](https://www.telerik.com/kendo-react-ui/components/animation/hooks#toc-removing-child-elements)).
     */
    onExited?: (event: AnimationEventArguments) => void;
    /**
     * @hidden
     * This event is always triggered in contrast to `onExited` which TransitionGroup prevents when target element is not removed from DOM.
     */
    onAfterExited?: (event: AnimationEventArguments) => void;
    /**
     * Defines whether a transition should happen on the first mount.
     *
     * @default false
     */
    appear?: boolean;
    /**
     * Specifies whether to animate the entering (showing) element ([see example](https://www.telerik.com/kendo-react-ui/components/animation/disabled-state)).
     *
     * @default true
     */
    enter?: boolean;
    /**
     * Specifies whether to animate a leaving (disappearing) element ([see example](https://www.telerik.com/kendo-react-ui/components/animation/disabled-state)).
     *
     * @default true
     */
    exit?: boolean;
    /**
     * Specifies the duration of the transition for the entering (`animation in`) Animation ([see example](https://www.telerik.com/kendo-react-ui/components/animation/duration)). After the time runs out, the Animation is terminated.
     *
     * @default 300
     */
    transitionEnterDuration?: number;
    /**
     * Specifies the duration of the transition for the exiting (`animation out`) Animation ([see example](https://www.telerik.com/kendo-react-ui/components/animation/duration)). After the time runs out, the Animation is terminated.
     *
     * @default 300
     */
    transitionExitDuration?: number;
    /**
     * Specifies if the Animation uses lazy-mounting on the first `in={true}`.
     *
     * @default false
     */
    mountOnEnter?: boolean;
    /**
     * Specifies if the Animation unmounts after it reaches its exited state.
     *
     * @default false
     */
    unmountOnExit?: boolean;
}