Animation
Handling animation components
<Animation.Fade>
<Animation.Collapse>
<Animation.Bounce>
<Animation.Slide>
<Animation.Transition>
When Transition fails to meet business needs,you can try react-transition-group
Useage
import { Animation } from 'rsuite';
const { Fade, Collapse, Transition } = Animation;
Examples
Transition
Configure the following className in Transition and customize the related css animation.
exitedClassName="custom-exited"
exitingClassName="custom-exiting"
enteredClassName="custom-entered"
enteringClassName="custom-entering"
Props
<Fade>
Property |
Type (Default) |
Description |
enteredClassName |
string |
Adding a className after the component finished transtioning in |
enteringClassName |
string |
Adding a className as the component begins to transition in |
exitedClassName |
string |
Adding a className after the component finishes transitioning out |
exitingClassName |
string |
Adding a className as the component begins to transition out |
in |
boolean |
When true The animation will show itself |
onEnter |
(node?: null, Element, Text) => void |
Callback fired before the component transitions in |
onEntered |
(node?: null, Element, Text) => void |
Callback fired after the component finishes transitioning in |
onEntering |
(node?: null, Element, Text) => void |
Callback fired as the component begins to transition in |
onExit |
(node?: null, Element, Text) => void |
Callback fired right before the component transitions out |
onExited |
(node?: null, Element, Text) => void |
Callback fired after the Modal finishes transitioning out |
onExiting |
(node?: null, Element, Text) => void |
Callback fired as the component begins to transition out |
timeout |
number (300) |
Animation transition delay time |
transitionAppear |
boolean |
Turn on transitions when initially displayed |
unmountOnExit |
boolean |
Unmount component on exit |
<Collapse>
Property |
Type (Default) |
Description |
dimension |
union: 'height', 'width' () => ('height', 'width') |
Set fold size type |
enteredClassName |
string ('collapse in') |
Adding a className after the component finished transtioning in |
enteringClassName |
string ('collapsing') |
Adding a className as the component begins to transition in |
exitedClassName |
string ('collapse') |
Adding a className after the component finishes transitioning out |
exitingClassName |
string ('collapsing') |
Adding a className as the component begins to transition out |
getDimensionValue |
() => number |
Custom size value |
in |
boolean |
When true The animation will show itself |
onEnter |
(node?: null, Element, Text) => void |
Callback fired before the component transitions in |
onEntered |
(node?: null, Element, Text) => void |
Callback fired after the component finishes transitioning in |
onEntering |
(node?: null, Element, Text) => void |
Callback fired as the component begins to transition in |
onExit |
(node?: null, Element, Text) => void |
Callback fired right before the component transitions out |
onExited |
(node?: null, Element, Text) => void |
Callback fired after the Modal finishes transitioning out |
onExiting |
(node?: null, Element, Text) => void |
Callback fired as the component begins to transition out |
role |
string |
HTML role |
timeout |
number(300) |
Animation transition delay time |
transitionAppear |
boolean |
Turn on transitions when initially displayed |
unmountOnExit |
boolean |
Unmount component on exit |
<Bounce>
Property |
Type (Default) |
Description |
enteredClassName |
string |
Adding a className after the component finished transtioning in |
enteringClassName |
string |
Adding a className as the component begins to transition in |
exitedClassName |
string |
Adding a className after the component finishes transitioning out |
exitingClassName |
string |
Adding a className as the component begins to transition out |
in |
boolean |
When true The animation will show itself |
onEnter |
(node?: null, Element, Text) => void |
Callback fired before the component transitions in |
onEntered |
(node?: null, Element, Text) => void |
Callback fired after the component finishes transitioning in |
onEntering |
(node?: null, Element, Text) => void |
Callback fired as the component begins to transition in |
onExit |
(node?: null, Element, Text) => void |
Callback fired right before the component transitions out |
onExited |
(node?: null, Element, Text) => void |
Callback fired after the Modal finishes transitioning out |
onExiting |
(node?: null, Element, Text) => void |
Callback fired as the component begins to transition out |
timeout |
number (300) |
Animation transition delay time |
transitionAppear |
boolean |
Turn on transitions when initially displayed |
unmountOnExit |
boolean |
Unmount component on exit |
<Slide>
Property |
Type (Default) |
Description |
enteredClassName |
string |
Adding a className after the component finished transtioning in |
enteringClassName |
string |
Adding a className as the component begins to transition in |
exitedClassName |
string |
Adding a className after the component finishes transitioning out |
exitingClassName |
string |
Adding a className as the component begins to transition out |
in |
boolean |
When true The animation will show itself |
onEnter |
(node?: null, Element, Text) => void |
Callback fired before the component transitions in |
onEntered |
(node?: null, Element, Text) => void |
Callback fired after the component finishes transitioning in |
onEntering |
(node?: null, Element, Text) => void |
Callback fired as the component begins to transition in |
onExit |
(node?: null, Element, Text) => void |
Callback fired right before the component transitions out |
onExited |
(node?: null, Element, Text) => void |
Callback fired after the Modal finishes transitioning out |
onExiting |
(node?: null, Element, Text) => void |
Callback fired as the component begins to transition out |
timeout |
number (300) |
Animation transition delay time |
transitionAppear |
boolean |
Turn on transitions when initially displayed |
unmountOnExit |
boolean |
Unmount component on exit |
placement |
enum: Placement4('right') |
The placement of component |
<Transition>
Property |
Type (Default) |
Description |
enteredClassName |
string |
Adding a className after the component finished transtioning in |
enteringClassName |
string |
Adding a className as the component begins to transition in |
exitedClassName |
string |
Adding a className after the component finishes transitioning out |
exitingClassName |
string |
Adding a className as the component begins to transition out |
in |
boolean |
When true The animation will show itself. |
onEnter |
(node?: null, Element, Text) => void |
Callback fired before the component transitions in |
onEntered |
(node?: null, Element, Text) => void |
Callback fired after the component finishes transitioning in |
onEntering |
(node?: null, Element, Text) => void |
Callback fired as the component begins to transition in |
onExit |
(node?: null, Element, Text) => void |
Callback fired right before the component transitions out |
onExited |
(node?: null, Element, Text) => void |
Callback fired after the Modal finishes transitioning out |
onExiting |
(node?: null, Element, Text) => void |
Callback fired as the component begins to transition out |
timeout |
number(1000) |
Animation transition delay time |
transitionAppear |
boolean |
Turn on transitions when initially displayed |
unmountOnExit |
boolean |
Unmount component on exit |