@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
67 lines • 3.07 kB
TypeScript
/**
* A bottom-sheet animation's arguments. See `Element.prototype.animate`.
*/
export type BottomSheetAnimationArgs = Parameters<Element['animate']>;
/**
* A collection of bottom-sheet animations. Each element of the sheet may have
* multiple animations.
*/
export interface BottomSheetAnimation {
/**
* Animations for the scrim backdrop.
*/
scrim?: BottomSheetAnimationArgs[];
/**
* Animations for the container of the bottom sheet.
*/
container?: BottomSheetAnimationArgs[];
}
/**
* The default bottom-sheet open animation.
* - Scrim: opacity 0 -> 0.32 over 500ms, linear.
* - Container: translateY(100%) -> translateY(0) over 500ms, Emphasized.
*/
export declare const BottomSheetDefaultOpenAnimation: () => BottomSheetAnimation;
/**
* The default bottom-sheet close animation. Mirror of `BottomSheetDefaultOpenAnimation`
* with shorter durations and the accelerating easing curve.
* - Scrim: opacity 0.32 -> 0 over 150ms, linear.
* - Container: translateY(0) -> translateY(100%) over 150ms, EmphasizedAccelerate.
*/
export declare const BottomSheetDefaultCloseAnimation: () => BottomSheetAnimation;
/**
* The detent-change animation (modal only). Animates `translateY` from a
* current offset (e.g. mid-snap from a drag) back to 0 while the CSS rule
* for the new detent's `max-height` is applied via the variant class.
*
* - Container: translateY(currentOffset) -> translateY(0) over 350ms,
* Emphasized. Only emits a keyframes pair when `currentOffset > 0`;
* otherwise the caller already at-rest and no translate animation is
* needed (max-height transition is handled by CSS).
* - Scrim: no animation (opacity is the same at both detents).
*
* `direction` is currently informational — the host decides the new `max-height`
* by toggling the `detent-full` / `detent-peek` class on the dialog. Kept in
* the signature for future use (e.g. distinct expand vs collapse easings).
*/
export declare const BottomSheetDetentChangeAnimation: (direction: 'expand' | 'collapse', currentOffset: number) => BottomSheetAnimation;
/**
* The drag-snap-back animation. Animates the container from the current drag
* offset back to its resting position, and the scrim from its current
* (interpolated) opacity back to the peak.
*
* - Scrim: opacity scrimCurrent -> 0.32 over 250ms, linear.
* - Container: translateY(fromDy) -> translateY(0) over 250ms,
* EmphasizedDecelerate.
*/
export declare const BottomSheetDragSnapBackAnimation: (fromDy: number, scrimCurrent: number) => BottomSheetAnimation;
/**
* The drag-commit-close animation. Animates the container from the current
* drag offset out the bottom of the viewport, and fades the scrim to 0.
*
* - Scrim: opacity scrimCurrent -> 0 over 200ms, linear.
* - Container: translateY(fromDy) -> translateY(100%) over 200ms,
* EmphasizedAccelerate.
*/
export declare const BottomSheetDragCommitCloseAnimation: (fromDy: number, scrimCurrent: number) => BottomSheetAnimation;
//# sourceMappingURL=bottom-sheet.animation.d.ts.map