我想創建一個響應用戶顯示高度的動畫。我在javaScript中創建了一個存儲文檔高度的變量，但是我不知道如何在javaScript中創建一個關鍵幀動畫來允許be使用這個變量。

例如，如果我想用javaScript創建這個關鍵幀動畫，我該怎么做。

@keyframes fadeIn {
    from{
        opacity:0%;
        
    }

    to{
        opacity:100%;
        
    }
    
}

你可以去任何js動畫庫。我會推薦GSAP (GreenSock動畫平臺)或者anime.js

例如，在GSAP你可以完成這樣的事情:

var element = document.querySelector('.myElement');

gsap.to(element, {
  duration: 2,
  keyframes: [
    { opacity: 0, scale: 0 },
    { opacity: 1, scale: 1.2 },
    { opacity: 1, scale: 1 }
  ],
  repeat: -1 // Repeat indefinitely
});

也可以看看anime.js。它們提供了各種高級css動畫屬性。

你也可以從另一個角度來解決這個問題。 您可以像這樣在關鍵幀中使用CSS變量

@keyframes maxHeightAnimated{
    from{
        max-height: 0;
    }
    to{
        max-height: var(--document-height)
    }
}

然后你可以在任何時候通過你的JS動態地設置CSS變量的值:

document.addEventListener("DOMContentLoaded", () => {
    let r = document.querySelector(':root')
    r.style.setProperty('--document-height',document.body.offsetHeight + 'px')
    $(window).on('resize', () => {
        let r = document.querySelector(':root')
        r.style.setProperty('--document-height',document.body.offsetHeight + 'px')
    });
}

在這個例子中，我在document loaded和window resize事件上設置了這個值。什么保證文檔高度總是包含實際高度