File size: 2,591 Bytes
04ec17f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
// Original Source: https://reemus.dev/article/disable-css-transition-color-scheme-change#heading-ultimate-solution-for-changing-color-scheme-without-transitions
let timeoutAction;
let timeoutEnable;
/**
* Whether this is the first time the function has been
* called, which will be true for the initial load, where
* we shouldn't need to disable any transitions, as there
* is nothing to transition from.
*/
let hasLoaded = false;
let styleElement = null;
// Create reusable style element
function getStyleElement() {
if (styleElement)
return styleElement;
styleElement = document.createElement("style");
styleElement.appendChild(document.createTextNode(`* {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}`));
return styleElement;
}
// Perform a task without any css transitions
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function withoutTransition(action, synchronous = false) {
if (typeof document === "undefined")
return;
// Skip transition disabling on initial load
if (!hasLoaded) {
hasLoaded = true;
action();
return;
}
// In test environments, run synchronously to avoid timing issues
const isTest = (typeof process !== "undefined" && process.env?.NODE_ENV === "test") ||
(typeof window !== "undefined" &&
window.__vitest_worker__);
if (isTest) {
action();
return;
}
clearTimeout(timeoutAction);
clearTimeout(timeoutEnable);
const style = getStyleElement();
const disable = () => document.head.appendChild(style);
const enable = () => {
if (style.parentNode) {
document.head.removeChild(style);
}
};
function executeAction() {
action();
// defer enable to ensure action completes
window.requestAnimationFrame(enable);
}
// Use requestAnimationFrame for better performance
if (typeof window.requestAnimationFrame !== "undefined") {
disable();
if (synchronous) {
executeAction();
}
else {
// defer action to next frame to avoid blocking
window.requestAnimationFrame(() => {
executeAction();
});
}
return;
}
// Fallback for older browsers
disable();
timeoutAction = window.setTimeout(() => {
action();
timeoutEnable = window.setTimeout(enable, 16);
}, 16);
}
|