Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @react-md/transition

Index

Type aliases

CSSTransitionReturnValue

CSSTransitionReturnValue<E>: [Rendered, CSSTransitionProvidedProps<E>, Dispatch<TransitionAction>, TransitionStage]

Type parameters

  • E: HTMLElement

EnterHandler

EnterHandler<E>: (node: E, isAppearing: boolean) => void

Type parameters

  • E: HTMLElement = HTMLDivElement

Type declaration

    • (node: E, isAppearing: boolean): void
    • This is basically the same as the EnterHandler from react-transition-group except that this allows for the element type to be provided.

      Parameters

      • node: E
      • isAppearing: boolean

      Returns void

ExitHandler

ExitHandler<E>: (node: E) => void

Type parameters

  • E: HTMLElement = HTMLDivElement

Type declaration

    • (node: E): void
    • This is basically the same as the ExitHandler from react-transition-group except that this allows for the element type to be provided.

      Parameters

      • node: E

      Returns void

FixedTo

FixedTo: RefObject<HTMLElement | null> | FixedToFunction | HTMLElement | string | null
remarks

@since 2.8.0 Supports RefObject implementation.

FixedToFunction

FixedToFunction: () => HTMLElement | null

Type declaration

    • (): HTMLElement | null
    • Returns HTMLElement | null

GetFixedPositionOptions

GetFixedPositionOptions: (node: HTMLElement) => OptionalFixedPositionOptions

Type declaration

OnFixedPositionScroll

OnFixedPositionScroll: (event: Event, data: ScrollData) => void

Type declaration

OptionalFixedPositionOptions

OptionalFixedPositionOptions: Omit<FixedPositionOptions, "container" | "element">

OverridableCSSTransitionProps

OverridableCSSTransitionProps: OverridableTransitionProps & Pick<CSSTransitionProps, "classNames">

PositionChange

PositionChange: (wanted: PositionAnchor, actual: PositionAnchor) => void

Type declaration

    • (wanted: PositionAnchor, actual: PositionAnchor): void
    • Parameters

      • wanted: PositionAnchor
      • actual: PositionAnchor

      Returns void

TransitionAction

TransitionAction: TransitionStage | typeof UNMOUNT

TransitionHooks

TransitionHooks: Pick<TransitionProps, "onEnter" | "onEntering" | "onEntered" | "onExited">

TransitionStage

TransitionStage: typeof ENTER | typeof ENTERING | typeof ENTERED | typeof EXIT | typeof EXITING | typeof EXITED

TransitionTimeout

TransitionTimeout: Required<TransitionProps>["timeout"]

Variables

COLLAPSE_TIMEOUT

COLLAPSE_TIMEOUT: TransitionTimeout = ...

CROSS_FADE_CLASSNAMES

CROSS_FADE_CLASSNAMES: CSSTransitionClassNames = ...

CROSS_FADE_TIMEOUT

CROSS_FADE_TIMEOUT: TransitionTimeout = ...

CrossFade

CrossFade: ForwardRefExoticComponent<Pick<CrossFadeProps, "className" | "children" | "id" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classNames" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "timeout" | "appear" | "enter" | "exit" | "temporary" | "wrap" | "transitionIn"> & RefAttributes<HTMLDivElement>> = ...

The Collapse is really just a convenience wrapper for the useCrossFade hook that triggers the transition by cloning the ref and className into the children of this component.

This transition will only fire on mount and when the appear prop is set to true, so the way to trigger new animations is by changing the key for this component so it re-mounts. However it is generally not recommended to fire this transition on first page load especially when dealing with server side rendering. A simple way to work around this is have the CrossFade near the root of the app and just disable the appear prop until the first render.

If you want more fine-grain control over the transition, it is recommended to use the useCrossFade hook instead.

DEFAULT_COLLAPSE_MIN_HEIGHT

DEFAULT_COLLAPSE_MIN_HEIGHT: 0 = 0

DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM

DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM: 0 = 0

DEFAULT_COLLAPSE_MIN_PADDING_TOP

DEFAULT_COLLAPSE_MIN_PADDING_TOP: 0 = 0

ENTER

ENTER: "enter" = "enter"

ENTERED

ENTERED: "entered" = "entered"

ENTERING

ENTERING: "entering" = "entering"

EXIT

EXIT: "exit" = "exit"

EXITED

EXITED: "exited" = "exited"

EXITING

EXITING: "exiting" = "exiting"

SCALE_CLASSNAMES

SCALE_CLASSNAMES: CSSTransitionClassNames = ...

SCALE_TIMEOUT

SCALE_TIMEOUT: TransitionTimeout = ...

SCALE_Y_CLASSNAMES

SCALE_Y_CLASSNAMES: CSSTransitionClassNames = ...

UNMOUNT

UNMOUNT: "unmount" = "unmount"

Functions

Collapse

  • The Collapse component is used to transition a child element in and out of view by animating it's max-height. This means that the child must either be an HTMLElement or a component that forwards the ref to an HTMLElement and applies the style, className, and hidden props to an HTMLElement.

    Note: This component should not be used for position: absolute or position: fixed elements. Instead, the ScaleTransition or just a simple transform transition should be used instead. Animating max-height, padding-top, and padding-bottom is much less performant than transform transition since it forces DOM repaints.

    Parameters

    Returns ReactElement | null

ScaleTransition

  • This ScaleTransition component is used to trigger an animation that switches between an opacity of 0 and 1 and using a transform: scale(0) to transform: scale(1). It is recommended to also manually apply a transform-origin style or use the useFixedPositioning hook to generate for you so that the animation starts from a specific point.

    Since the default scale animation is X and Y, you can enable the vertical prop which will update the transition to use transform: scaleY(0) to transform: scaleY(1) instead.

    Parameters

    Returns ReactElement

useCSSTransition

  • This hook is heavily inspired by the CSSTransition component from react-transition-group since it's really just a hook version for it.

    This hook allows you to transition class names for an element for enter and exit transitions.

    There are two different ways to create an "appear-only"/"on-mount-only" transition: use the onEntered callback to reset the transitionIn to false, or manually fire the ENTERED action with the returned dispatch function when it should be fired again.

    Example changing transitionIn for pathname changes:

    const [transitionIn, setTransitionIn] = useState(true);
    const [rendered, transitionProps] = useCSSTransition({
    appear: true,
    timeout: { enter: 200 },
    transitionIn,
    onEntered: () => setTransitionIn(false),
    });

    const prevPathname = useRef(pathname);
    if (pathname !== prevPathname.current) {
    prevPathname.current = pathname;
    setTransitionIn(true)
    }

    return (
    <div {...transitionProps}>
    <Switch>
    <Route path="/" component={Home} />
    <Route path="/other" component={Other} />
    </Switch>
    </div>
    );

    Example with dispatch for pathname changes:

    const [rendered, transitionProps, dispatch] = useCSSTransition({
    appear: true,
    timeout: { enter: 200 },
    transitionIn: true,
    });

    const prevPathname = useRef(pathname);
    if (pathname !== prevPathname.current) {
    prevPathname.current = pathname;
    dispatch(ENTERED);
    }

    return (
    <div {...transitionProps}>
    <Switch>
    <Route path="/" component={Home} />
    <Route path="/other" component={Other} />
    </Switch>
    </div>
    );
    see

    useCrossFade The useCrossFade is a good example of using this hook for a custom CSS Transition.

    Type parameters

    • E: HTMLElement = HTMLDivElement

    Parameters

    Returns CSSTransitionReturnValue<E>

    An ordered list of a boolean if the component should be rendered, transition props to provide to the transitioning element, a dispatch function for triggering the transition manually (should not be used much), and the current transition stage.

useCollapse

  • useCollapse<E>(collapsed: boolean, __namedParameters?: CollapseOptions<E>): ReturnValue<E>
  • The useCollapse hook is used to transition a child element in and out of view by animating it's max-height. This means that the child must either be an HTMLElement or a component that forwards the ref to an HTMLElement and applies the style, className, and hidden props to an HTMLElement.

    Simple Example:

    const Example = () => {
    const [collapsed, setCollapsed] = useState(true);
    const [rendered, transitionProps] = useCollapse(collapsed);

    return (
    <>
    <Button onClick={() => setCollapsed(!collapsed)}>Toggle</Button>
    {rendered && (
    <div {...transitionProps}>
    <Text>Stuff that should be animated</Text>
    <div>Whatever content...</div>
    </div>
    )}
    </>
    );
    }

    Note: This should not be used for position: absolute or position: fixed elements. Instead, the ScaleTransition or just a simple transform transition should be used instead. Animating max-height, padding-top, and padding-bottom is much less performant than transform transition since it forces the DOM to repaint during the

    Type parameters

    • E: HTMLElement = HTMLDivElement

    Parameters

    • collapsed: boolean

      Boolean if the element is currently collapsed. Changing this value will cause the animation to trigger.

    • __namedParameters: CollapseOptions<E> = {}

    Returns ReturnValue<E>

    An ordered list containing a boolean if the collapse should be rendered in the DOM followed by an object of props to pass to the collapsible element to handle the transition.

useCrossFade

  • This is a simple wrapper for the useCSSTransition that will allow you to trigger cross fade transitions. The default behavior for this hook triggers the transition immediately once mounted. This is great if it is being used for new data appearing in a list, but not super great for route transitions.

    If you want to create a route transition, it's recommended to set the appear option to false and then manually fire the ENTER transition from the dispatch function. Here's a quick example using the Layout component from @react-md/layout and react-router.

    import { useLocation, BrowserRouter } from "react-router-dom";
    import { useCrossFade, ENTER } from "@react-md/transition";

    const App = () => {
    const { pathname } = useLocation();
    const [, { ref, className }, dispatch] = useCrossFade({
    appear: false,
    });

    const prevPathname = useRef(pathname);
    if (pathname !== prevPathname.current) {
    prevPathname.current = pathname;
    dispatch(ENTER);
    }

    return (
    <Layout
    {...useLayoutNavigation(navItems, pathname)}
    appBarTitle="My App"
    mainRef={ref}
    mainClassName={className}
    >
    {children}
    </Layout>
    );
    }

    Type parameters

    • E: HTMLElement = HTMLDivElement

    Parameters

    Returns CSSTransitionReturnValue<E>

    An ordered list of a boolean if the component should be rendered, transition props to provide to the transitioning element, a dispatch function for triggering the transition manually (should not be used much), and the current transition stage.

useFixedPositioning

  • This hook is used to automatically handle fixed positioning when an element is used alongside a Transition from react-transition-group. This will provide merged onEnter, onEntering, onEntered, and onExited handlers to pass down as well as the current style object to apply to the element.

    Until the element has been removed from the DOM and is visible, the position will automatically update when the user scrolls or resizes the screen.

    remarks

    It is recommended to start the exit animation when that happens though.

    Parameters

    Returns FixedPositioningHookReturnValue

useTransition

  • This is heavily inspired by the Transition component from react-transition-group since it's really just a hook version of it.

    This hook allows you to transition between an enter and exit state with defined timeouts, but you'll most likely be looking for the useCSSTransition instead.

    Type parameters

    • E: HTMLElement = HTMLDivElement

    Parameters

    Returns TransitionReturnValue<E>

    An object describing the current transition stage and props that should be passed to a component.

Generated using TypeDoc