Skip to main content
react-md

useScaleTransition 

function useScaleTransition<E extends HTMLElement>(
  options: ScaleTransitionHookOptions<E>
): CSSTransitionHookReturnValue<E>;

The useScaleTransition create a transition that uses transform: scale(0) -> transform: scale(1) and should generally be used for animating temporary elements.

Example Usage

See the ScaleTransition demo for examples.

Parameters

export interface ScaleTransitionHookOptions<E extends HTMLElement>
  extends PreconfiguredCSSTransitionOptions<E> {
  /**
   * Boolean if the scale transition should be vertical instead of horizontal.
   * This really only changes the default value for the {@link classNames}.
   *
   * @defaultValue `false`
   */
  vertical?: boolean;

  /**
   * @see {@link PreconfiguredCSSTransitionOptions.temporary}
   * @defaultValue `true`
   */
  temporary?: boolean;

  /**
   * @see {@link vertical}
   * @see {@link SCALE_CLASSNAMES}
   * @see {@link SCALE_Y_CLASSNAMES}
   * @defaultValue `vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES`
   */
  classNames?: CSSTransitionClassNames;
}

export const SCALE_CLASSNAMES = {
  appear: "rmd-scale-transition--enter",
  appearActive: "rmd-scale-transition--enter-active",
  enter: "rmd-scale-transition--enter",
  enterActive: "rmd-scale-transition--enter-active",
  enterDone: "",
  exit: "rmd-scale-transition--exit",
  exitActive: "rmd-scale-transition--exit-active",
} as const satisfies CSSTransitionClassNames;

export const SCALE_Y_CLASSNAMES = {
  appear: "rmd-scale-transition--enter rmd-scale-transition--y-enter",
  appearActive:
    "rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active",
  enter: "rmd-scale-transition--enter rmd-scale-transition--y-enter",
  enterActive:
    "rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active",
  enterDone: "",
  exit: "rmd-scale-transition--exit rmd-scale-transition--y-exit",
  exitActive:
    "rmd-scale-transition--exit-active rmd-scale-transition--y-exit-active",
} as const satisfies CSSTransitionClassNames;

export const SCALE_TIMEOUT = {
  enter: 200,
  exit: 150,
} as const satisfies TransitionTimeout;

Returns

The CSSTransitionHookReturnValue.

See Also