New to KendoReactLearn about KendoReact Free.

SlideProps

Represents the props of the KendoReact Slide 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
<Slide childFactory={(child) => React.cloneElement(child, { style: { opacity: 0.5 } })} />

className?

string

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

ts
<Slide className="slide-animation" />

component?

React.ReactNode

"div"

Specifies the HTML tag of the parent Animation container.

ts
<Slide component="article" />

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?

SlideDirection

"down"

Specifies the direction of the Slide Animation.

ts
<Slide direction="left" />

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
<Slide id="slide-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
<Slide style={{ margin: "10px" }} />

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