mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-03 11:22:30 +02:00
feat(theme-classic): respect prefers-reduced-motion: reduce
mediaquery, bump Infima to alpha.43 (#8674)
This commit is contained in:
parent
d98edcd95c
commit
f8edeb0816
5 changed files with 14 additions and 7 deletions
|
@ -65,6 +65,10 @@ function applyCollapsedStyle(el: HTMLElement, collapsed: boolean) {
|
|||
el.style.height = collapsedStyles.height;
|
||||
}
|
||||
|
||||
function userPrefersReducedMotion(): boolean {
|
||||
return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
}
|
||||
|
||||
/*
|
||||
Lex111: Dynamic transition duration is used in Material design, this technique
|
||||
is good for a large number of items.
|
||||
|
@ -72,6 +76,9 @@ https://material.io/archive/guidelines/motion/duration-easing.html#duration-easi
|
|||
https://github.com/mui-org/material-ui/blob/e724d98eba018e55e1a684236a2037e24bcf050c/packages/material-ui/src/styles/createTransitions.js#L40-L43
|
||||
*/
|
||||
function getAutoHeightDuration(height: number) {
|
||||
if (userPrefersReducedMotion()) {
|
||||
return 0;
|
||||
}
|
||||
const constant = height / 36;
|
||||
return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue