New to KendoReactLearn about KendoReact Free.

AnimationProps

Represents the props of the KendoReact Animation component.

NameTypeDefaultDescription

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

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
<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?

string

Specifies the HTML tag of the parent Animation container. Defaults to div.

ts
<Animation component="main" />

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.

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
<Animation id="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.

ts
<Animation stackChildren={true} />

style?

any

Specifies the inline styles to be applied to the Animation container.

ts
<Animation style={{ width: "100%" }} />

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.

transitionName

string

Specifies the base class name for the transition.

ts
<Animation transitionName="fade" />

unmountOnExit?

boolean

Specifies if the Animation will unmount after it reaches its exited state. Defaults to false.

unstyled?

AnimationsClassStructure

Provides unstyled options for the Animation.

ts
<Animation unstyled={{ appear: "unstyled-appear" }} />
Not finding the help you need?
Contact Support