Fade

The Fade component animates a single child element with a smooth fade-in and fade-out effect. It manages the child's visibility and transition lifecycle so you can declaratively show or hide content with minimal setup. Fade preserves DOM semantics and accessibility while providing a lightweight way to add subtle entrance and exit motion to your UI.

Usage

To import and use the Fade component in your application, use the following code snippet:

Demos

Explore the demos of the React Fade component. Refer to this page.

Props

The following table outlines the props for the Fade component:

NameTypeDefaultDescription
appear
boolean
true

Determines if the animation should run on the initial mount.

children
ReactElement
-

The content to be animated - must be a single React element.

className
string
-

Additional CSS class names to apply to the animate element.

delay
number
0

Specifies the delay before the animate starts in milliseconds.

duration
number
400

Specifies the duration of the animate in milliseconds.

in
boolean
true

Controls whether the animation plays the "in" (enter) or "out" (exit) effect.

timingFunction
string
'ease'

Specifies the timing function for the animate.

Methods

The following table outlines the methods for the Fade component:

NameParametersReturnsDescription
stop
-
void

Stops the current animate.

Events

The following table outlines the events for the Fade component:

NameTypeDescription
onBegin
(args: AnimateEvent) => void

Triggers when the animate starts, allowing execution of logic at animate start.

onEnd
(args: AnimateEvent) => void

Triggers when animate is completed, allowing execution of logic after animate finishes.

onFail
(args: AnimateEvent) => void

Triggers when animate fails due to errors, providing error information.

onProgress
(args: AnimateEvent) => void

Triggers when animate is in-progress, providing progress information.