| 1 | import { Component } from "react";
|
| 2 | import { TransitionProps } from "./Transition";
|
| 3 |
|
| 4 | export interface CSSTransitionClassNames {
|
| 5 | appear?: string | undefined;
|
| 6 | appearActive?: string | undefined;
|
| 7 | appearDone?: string | undefined;
|
| 8 | enter?: string | undefined;
|
| 9 | enterActive?: string | undefined;
|
| 10 | enterDone?: string | undefined;
|
| 11 | exit?: string | undefined;
|
| 12 | exitActive?: string | undefined;
|
| 13 | exitDone?: string | undefined;
|
| 14 | }
|
| 15 |
|
| 16 | export type CSSTransitionProps<Ref extends undefined | HTMLElement = undefined> = TransitionProps<Ref> & {
|
| 17 | /**
|
| 18 | * The animation `classNames` applied to the component as it enters or exits.
|
| 19 | * A single name can be provided and it will be suffixed for each stage: e.g.
|
| 20 | *
|
| 21 | * `classNames="fade"` applies `fade-enter`, `fade-enter-active`,
|
| 22 | * `fade-exit`, `fade-exit-active`, `fade-appear`, and `fade-appear-active`.
|
| 23 | *
|
| 24 | * Each individual classNames can also be specified independently like:
|
| 25 | *
|
| 26 | * ```js
|
| 27 | * classNames={{
|
| 28 | * appear: 'my-appear',
|
| 29 | * appearActive: 'my-appear-active',
|
| 30 | * appearDone: 'my-appear-done',
|
| 31 | * enter: 'my-enter',
|
| 32 | * enterActive: 'my-enter-active',
|
| 33 | * enterDone: 'my-enter-done',
|
| 34 | * exit: 'my-exit',
|
| 35 | * exitActive: 'my-exit-active',
|
| 36 | * exitDone: 'my-exit-done'
|
| 37 | * }}
|
| 38 | * ```
|
| 39 | */
|
| 40 | classNames?: string | CSSTransitionClassNames | undefined;
|
| 41 | };
|
| 42 |
|
| 43 | declare class CSSTransition<Ref extends undefined | HTMLElement> extends Component<CSSTransitionProps<Ref>> {}
|
| 44 |
|
| 45 | export default CSSTransition;
|