New to KendoReactLearn about KendoReact Free.

AnimationChildProps

Represents the props of the child Animation elements.

NameTypeDefaultDescription

animationEnteredStyle?

any

Inline styles that apply when the Animation has entered.

ts
<AnimationChild animationEnteredStyle={{ opacity: 1 }} />

animationEnteringStyle?

any

Specifies the style that applies when the Animation reaches its entering state.

ts
<AnimationChild animationEnteringStyle={{ opacity: 0.5 }} />

animationExitedStyle?

any

Inline styles that apply when the Animation has exited.

ts
<AnimationChild animationExitedStyle={{ opacity: 0 }} />

animationExitingStyle?

any

Specifies the style that applies when the Animation reaches its exiting state.

ts
<AnimationChild animationExitingStyle={{ opacity: 0.5 }} />

appear?

boolean

false

Defines whether a transition should happen on the first mount.

className?

string

Custom CSS class to apply to the Animation container.

ts
<AnimationChild className="custom-animation-class" />

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).

in?

boolean

Controlled by TransitionGroup if present. Otherwise, sets the state of the enter or exit animations.

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).

style?

any

Custom inline styles to apply to the Animation container.

ts
<AnimationChild style={{ backgroundColor: "red" }} />

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. This class generates the appear, enter, and exit transition classes.

ts
<AnimationChild transitionName="fade" />

unmountOnExit?

boolean

false

Specifies if the Animation unmounts after it reaches its exited state.

unstyled?

AnimationsClassStructure

Provides unstyled options for the Animation. Accepts an object that implements the AnimationsClassStructure interface.

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