在 React/Gatsby 中，当我无权访问文档 object 时，如何使用 CSS 关键帧为粘性 header 设置动画？

Question

我有一个用 React/Gatsby 制作的粘性 header，它只有在你向下滚动一点后才会显示。 它可以工作，但是 header 突然弹出，所以我尝试对其进行动画处理。 问题是我正在尝试使用insertRule文档属性使用 CSS 关键帧，并且像 Netlify 这样的托管平台无法访问document object 所以每当它构建时，我都会收到此错误：

error "document" is not available during server side rendering.

我进行了研究，但找不到任何合适的解决方案，jsdom 似乎无法解决它，我尝试使用样式化组件，但不起作用。

这是关键帧 CSS 和使用insertRule插入样式：

let styleSheet = document.styleSheets[0];

const keyframesFixed = `
    @keyframes headerAnimationFixed{
        0%{
            opacity: 0.7;
            transform: translateY(-100%);
        }
        100%{
            opacity: 1;
            transform: translateY(0);
        }
    }
`;

styleSheet.insertRule(keyframesFixed, styleSheet.cssRules.length);

以下是我使用 animation 的方式：

const fixedStyles = {
    position: 'fixed',
    zIndex: '200',
    top: '0',
    left: '0',
    animation: 'headerAnimationFixed 0.3s ease',
    transition: 'all ease 0.3s'
}

使用fixedStyles ，我确定用户是否向下滚动足够远，如果是，则应用固定样式。

是否有另一种方法可以在 Header 组件中使用keyframes而不使用document object？

感谢您的时间！

Answer 1

正如您在docs中看到的（并且正如您所指出的）， document和其他全局对象（例如window ）在 SSR 中不可用。 有多种解决方案可以绕过此问题，但在您的情况下，最简单的方法就是检查window是否可用于触发动画。 如果是这样，这将意味着您不在 SSR 中。 像这样的东西应该工作：

if (typeof window != "undefined"){
let styleSheet = document.styleSheets[0];

const keyframesFixed = `
    @keyframes headerAnimationFixed{
        0%{
            opacity: 0.7;
            transform: translateY(-100%);
        }
        100%{
            opacity: 1;
            transform: translateY(0);
        }
    }
`;

styleSheet.insertRule(keyframesFixed, styleSheet.cssRules.length);
}

或者，如果您的包装器不允许if语句 (JSX)，您可以添加三元条件：

let styleSheet = typeof window != "undefined" ? document.styleSheets[0] : null;

const keyframesFixed = `
    @keyframes headerAnimationFixed{
        0%{
            opacity: 0.7;
            transform: translateY(-100%);
        }
        100%{
            opacity: 1;
            transform: translateY(0);
        }
    }
`;

typeof window != "undefined" ? styleSheet.insertRule(keyframesFixed, styleSheet.cssRules.length) : null;