New to KendoReactLearn about KendoReact Free.

RevealProps

Represents the props of the KendoReact Reveal Animation component.

NameTypeDefaultDescription

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
<Reveal childFactory={(child) => React.cloneElement(child, { hidden: true })} />

className?

string

Specifies the CSS class names to be applied to the Animation container.

ts
<Reveal className="reveal-animation" />

component?

React.ReactNode

"div"

Specifies the HTML tag of the parent Animation container.

ts
<Reveal component="aside" />

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.

direction?

RevealDirection

"vertical"

Specifies the direction of the Reveal Animation.

ts
<Reveal direction="horizontal" />

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
<Reveal id="reveal-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).

style?

any

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

ts
<Reveal style={{ padding: "20px" }} />

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.

unmountOnExit?

boolean

false

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

Not finding the help you need?
Contact Support