Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
Respect prefers-reduced-motion
+10
-7
+10
-7
src/useStyleTransition.ts
+10
-7
src/useStyleTransition.ts
···
59
59
animation.currentTime = 0.1;
60
60
61
61
let animating = false;
62
-
for (const propName in from) {
63
-
const value = /^--/.test(propName)
64
-
? element.style.getPropertyValue(propName)
65
-
: computed[propName];
66
-
if (value !== from[propName]) {
67
-
animating = true;
68
-
break;
62
+
const media = matchMedia('(prefers-reduced-motion: reduce)');
63
+
if (!media.matches) {
64
+
for (const propName in from) {
65
+
const value = /^--/.test(propName)
66
+
? element.style.getPropertyValue(propName)
67
+
: computed[propName];
68
+
if (value !== from[propName]) {
69
+
animating = true;
70
+
break;
71
+
}
69
72
}
70
73
}
71
74