fluentToastSizeEnter top-level constant
FluentMotionSpec
const fluentToastSizeEnter
The toast container's height expanding on entrance.
Transcribed from CollapseDelayed in
react-motion-components-preview/library/src/components/Collapse/Collapse.ts,
which is what renderToastContainer.tsx wraps every toast in:
export const CollapseDelayed = createPresenceComponentVariant(Collapse, {
sizeDuration: motionTokens.durationNormal, // 200ms
opacityDuration: motionTokens.durationSlower, // 400ms
staggerDelay: motionTokens.durationNormal, // 200ms
exitSizeDuration: motionTokens.durationNormal, // 200ms
exitOpacityDuration: motionTokens.durationSlower, // 400ms
exitStaggerDelay: motionTokens.durationSlower, // 400ms
easing: motionTokens.curveEasyEase,
exitEasing: motionTokens.curveEasyEase,
});
Note the easing is curveEasyEase, not the plain Collapse's
curveEasyEaseMax — the variant overrides it — which is why this does not
reuse FluentMotionSpec.collapse.
Implementation
const FluentMotionSpec fluentToastSizeEnter = FluentMotionSpec(
duration: FluentDuration.normal,
curve: FluentCurve.easyEase,
);