AnimationProps

Represents the props of the KendoReact Animation component.

Name	Type	Default	Description
animationEnteredStyle?	any		Specifies the inline styles applied when the Animation has entered. ts <Animation animationEnteredStyle={{ opacity: 1 }} />
animationEnteringStyle?	any		Specifies the inline styles applied when the Animation is entering. ts <Animation animationEnteringStyle={{ opacity: 0.5 }} />
animationExitedStyle?	any		Specifies the inline styles applied when the Animation has exited. ts <Animation animationExitedStyle={{ opacity: 0 }} />
animationExitingStyle?	any		Specifies the inline styles applied when the Animation is exiting. ts <Animation animationExitingStyle={{ opacity: 0.5 }} />
appear?	boolean	false	Defines whether a transition should happen on the first mount.
childFactory?	any		A function for customizing the rendering of child elements. ts <Animation childFactory={(child) => React.cloneElement(child, { ariaHidden: true })} />
className?	string		Specifies the CSS class names to be applied to the Animation container. ts <Animation className="animation-container" />
component?	React.ReactNode	"div"	Specifies the HTML tag of the parent Animation container. ts <Animation component="main" />
componentChildClassName?	string		Specifies the CSS class names that are set to each of the animated children elements.
componentChildStyle?	any		Specifies the styles that are set to each of the animated children elements.
enter?	boolean	true	Specifies whether to animate the entering (showing) element (see example).
exit?	boolean	true	Specifies whether to animate a leaving (disappearing) element (see example).
id?	string		Specifies the id attribute of the Animation container. ts <Animation id="animation-container" />
mountOnEnter?	boolean	false	Specifies if the Animation uses lazy-mounting on the first in={true}.
onEnter?	(event: AnimationEventArguments) => void		Called when you add a component to an existing Animation component and the Animation has not started yet (more information and example).
onEntered?	(event: AnimationEventArguments) => void		Called when you add a component to an existing Animation component and the Animation is now finished (more information and example).
onEntering?	(event: AnimationEventArguments) => void		Called when you add a component to an existing Animation component and the Animation is now happening (more information and example).
onExit?	(event: AnimationEventArguments) => void		An event called after the Animation has reached its exit state (more information and example).
onExited?	(event: AnimationEventArguments) => void		An event called after the Animation has reached its exited state (more information and example).
onExiting?	(event: AnimationEventArguments) => void		An event called after the Animation has reached its exiting state (more information and example).
stackChildren?	boolean		Determines whether child elements will stack on top of each other during the animation. ts <Animation stackChildren={true} />
style?	any		Specifies the inline styles to be applied to the Animation container. ts <Animation style={{ width: "100%" }} />
transitionEnterDuration?	number	300	Specifies the duration of the transition for the entering (animation in) Animation (see example). After the time runs out, the Animation is terminated.
transitionExitDuration?	number	300	Specifies the duration of the transition for the exiting (animation out) Animation (see example). After the time runs out, the Animation is terminated.
transitionName	string		Specifies the base class name for the transition. ts <Animation transitionName="fade" />
unmountOnExit?	boolean	false	Specifies if the Animation unmounts after it reaches its exited state.
unstyled?	AnimationsClassStructure		Provides unstyled options for the Animation. ts <Animation unstyled={{ appear: "unstyled-appear" }} />