@progress/kendo-react-animation/AnimationChild.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 { AnimationsClassStructure } from '@progress/kendo-react-common';
import { AnimationInterface } from './AnimationInterface.js';
import * as React from 'react';
/**
 * Represents the AnimationChild handle.
 */
export interface AnimationChildHandle {
    /**
     * Gets the element.
     */
    element: HTMLDivElement | null;
    /**
     * Gets the props.
     */
    props: AnimationChildProps;
}
/**
 * Represents the props of the child Animation elements.
 */
export interface AnimationChildProps extends AnimationInterface {
    /**
     * Controlled by `TransitionGroup` if present. Otherwise, sets the state of the enter or exit animations.
     */
    in?: boolean;
    /**
     * Custom inline styles to apply to the Animation container.
     *
     * @example
     * <AnimationChild style={{ backgroundColor: "red" }} />
     */
    style?: any;
    /**
     * Custom CSS class to apply to the Animation container.
     *
     * @example
     * <AnimationChild className="custom-animation-class" />
     */
    className?: string;
    /**
     * Specifies the base class name for the transition. This class generates
     * the `appear`, `enter`, and `exit` transition classes.
     *
     * @example
     * <AnimationChild transitionName="fade" />
     */
    transitionName: string;
    /**
     * Specifies the style that applies when the Animation reaches its entering state.
     *
     * @example
     * <AnimationChild animationEnteringStyle={{ opacity: 0.5 }} />
     */
    animationEnteringStyle?: any;
    /**
     * Inline styles that apply when the Animation has entered.
     *
     * @example
     * <AnimationChild animationEnteredStyle={{ opacity: 1 }} />
     */
    animationEnteredStyle?: any;
    /**
     * Specifies the style that applies when the Animation reaches its exiting state.
     *
     * @example
     * <AnimationChild animationExitingStyle={{ opacity: 0.5 }} />
     */
    animationExitingStyle?: any;
    /**
     * Inline styles that apply when the Animation has exited.
     *
     * @example
     * <AnimationChild animationExitedStyle={{ opacity: 0 }} />
     */
    animationExitedStyle?: any;
    /**
     * Provides unstyled options for the Animation. Accepts an object
     * that implements the `AnimationsClassStructure` interface.
     *
     * @example
     * <AnimationChild unstyled={{ appear: "custom-appear-class" }} />
     */
    unstyled?: AnimationsClassStructure;
}
export declare const AnimationChild: React.ForwardRefExoticComponent<AnimationChildProps & React.RefAttributes<AnimationChildHandle | null>>;