50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import { Component, ReactElement } from "react";
|
|
|
|
export enum modes {
|
|
out = 'out-in',
|
|
in = 'in-out'
|
|
}
|
|
|
|
export interface SwitchTransitionProps {
|
|
/**
|
|
* Transition modes.
|
|
* `out-in`: Current element transitions out first, then when complete, the new element transitions in.
|
|
* `in-out`: New element transitions in first, then when complete, the current element transitions out.
|
|
*/
|
|
mode?: 'out-in' | 'in-out';
|
|
|
|
/**
|
|
* Any `Transition` or `CSSTransition` component
|
|
*/
|
|
children: ReactElement;
|
|
}
|
|
|
|
/**
|
|
* A transition component inspired by the [vue transition modes](https://vuejs.org/v2/guide/transitions.html#Transition-Modes).
|
|
* You can use it when you want to control the render between state transitions.
|
|
* Based on the selected mode and the child's key which is the `Transition` or `CSSTransition` component, the `SwitchTransition` makes a consistent transition between them.
|
|
*
|
|
* If the `out-in` mode is selected, the `SwitchTransition` waits until the old child leaves and then inserts a new child.
|
|
* If the `in-out` mode is selected, the `SwitchTransition` inserts a new child first, waits for the new child to enter and then removes the old child
|
|
*
|
|
* ```jsx
|
|
* function App() {
|
|
* const [state, setState] = useState(false);
|
|
* return (
|
|
* <SwitchTransition>
|
|
* <FadeTransition key={state ? "Goodbye, world!" : "Hello, world!"}
|
|
* addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
|
|
* classNames='fade' >
|
|
* <button onClick={() => setState(state => !state)}>
|
|
* {state ? "Goodbye, world!" : "Hello, world!"}
|
|
* </button>
|
|
* </FadeTransition>
|
|
* </SwitchTransition>
|
|
* )
|
|
* }
|
|
* ```
|
|
*/
|
|
declare class SwitchTransition extends Component<SwitchTransitionProps> {}
|
|
|
|
export default SwitchTransition;
|