ZoomProps

Represent the props of the KendoReact Zoom Animation component.

Change Theme

Theme

Loading ...

Name	Type	Default	Description
appear?	boolean		Defines whether a transition should happen on the first mount. Defaults to false.
childFactory?	any		A function for customizing the rendering of child elements. ts <Zoom childFactory={(child) => React.cloneElement(child, { className: 'custom-class' })} />
className?	string		Specifies the CSS class names to be applied to the Animation container. ts <Zoom className="zoom-animation" />
component?	string		Specifies the HTML tag of the parent Animation container. Defaults to div. ts <Zoom component="section" />
componentChildClassName?	string		Specifies the CSS class names which are set to each of the animated children elements.
componentChildStyle?	any		Specifies the styles which are set to each of the animated children elements.
direction?	ZoomDirection		Specifies the direction of the Zoom Animation. Defaults to out. ts <Zoom direction="in" />
enter?	boolean		Specifies whether to animate the entering (showing) element (see example). Defaults to true.
exit?	boolean		Specifies whether to animate a leaving (disappearing) element (see example). Defaults to true.
id?	string		Specifies the id attribute of the Animation container. ts <Zoom id="zoom-animation-container" />
mountOnEnter?	boolean		Specifies if the Animation will use lazy-mounting on the first in={true}. Defaults to false.
onEnter?	(event: AnimationEventArguments) => void		Called when a component is added to an existing Animation component and the Animation has not started yet (more information and example).
onEntered?	(event: AnimationEventArguments) => void		Called when a component is added to an existing Animation component and the Animation is now finished (more information and example).
onEntering?	(event: AnimationEventArguments) => void		Called when a component is added to an existing Animation component and the Animation is now happening (more information and example).
onExit?	(event: AnimationEventArguments) => void		An event that is called after the Animation has reached its exit state (more information and example).
onExited?	(event: AnimationEventArguments) => void		An event that is called after the Animation has reached its exited state (more information and example).
onExiting?	(event: AnimationEventArguments) => void		An event that is 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. Defaults to false. ts <Zoom stackChildren={true} />
style?	any		Specifies the inline styles to be applied to the Animation container. ts <Zoom style={{ backgroundColor: "red" }} />
transitionEnterDuration?	number		Specifies the duration of the transition for the entering (animation in) Animation (see example). After the time runs out, the Animation is terminated. Defaults to 300ms.
transitionExitDuration?	number		Specifies the duration of the transition for the exiting (animation out) Animation (see example). After the time runs out, the Animation is terminated. Defaults to 300ms.
unmountOnExit?	boolean		Specifies if the Animation will unmount after it reaches its exited state. Defaults to false.