如何在JavaScript中创建可使用文档高度变量的关键帧动画？

基础实现：还原fadeIn关键帧 #

要在JS中创建CSS关键帧，核心是通过CSSOM动态插入规则。以下是实现你给出的fadeIn动画的代码：

// 获取文档中的样式表（也可以创建新样式表）
const styleSheet = document.styleSheets[0];

// 插入fadeIn关键帧规则
styleSheet.insertRule(`
  @keyframes fadeIn {
    from {
      opacity: 0%;
    }
    to {
      opacity: 100%;
    }
  }
`, styleSheet.cssRules.length);

进阶：嵌入文档高度变量 #

假设你已定义文档高度变量const docHeight = document.documentElement.scrollHeight;，可以直接把变量嵌入到关键帧的属性值中，实现适配高度的动画。比如做一个从文档底部滑入并淡入的动画：

// 定义文档高度变量
const docHeight = document.documentElement.scrollHeight;

// 创建新的style元素插入到页面（避免跨域样式表权限问题）
const styleElement = document.createElement('style');
styleElement.textContent = `
  @keyframes slideUpFadeIn {
    from {
      opacity: 0%;
      transform: translateY(${docHeight}px);
    }
    to {
      opacity: 100%;
      transform: translateY(0);
    }
  }
`;
document.head.appendChild(styleElement);

应用动画到元素 #

动画创建完成后，直接给目标元素设置动画属性即可：

const targetElement = document.getElementById('your-target-element');
targetElement.style.animation = 'slideUpFadeIn 1s ease-out forwards';

注意事项 #

• 若操作现有样式表时遇到权限错误（比如跨域样式表），优先使用创建新<style>元素的方式，兼容性更好。
• 变量值会在插入关键帧时被固定，如果文档高度动态变化（比如内容加载后），需要重新生成关键帧规则。

内容的提问来源于stack exchange，提问作者velzzz