使用 javascript 而不是 ZD223E1439188E478349D52476506C2 在滾動時觸發 CSS Animation

Question

如何使用 ZDE9B9ED78D7E2E1DCEEFFEE780E2F91 觸發 svg 路徑的 CSS animation 嘗試了很多方法。 在這里，我添加了一個基本上是 svg 圖像的文本。 animation 工作正常，我想要的是 animation 僅在滾動時觸發。

 * { background-color: black; }.banner { color: white; font-size: 30px; width: 100%; height: 800px; } #logo { position: absolute; left: 50%; transform: translateX(-50%); } #logo path:nth-child(1) { stroke-dasharray: 545px; stroke-dashoffset: 545px; animation: line-anim 2s ease forwards; } #logo path:nth-child(2) { stroke-dasharray: 303px; stroke-dashoffset: 303px; animation: line-anim 2s ease forwards.3s; } #logo path:nth-child(3) { stroke-dasharray: 439px; stroke-dashoffset: 439px; animation: line-anim 2s ease forwards.6s; } #logo path:nth-child(4) { stroke-dasharray: 526px; stroke-dashoffset: 526px; animation: line-anim 2s ease forwards.9s; } #logo path:nth-child(5) { stroke-dasharray: 525px; stroke-dashoffset: 525px; animation: line-anim 2s ease forwards 1.2s; } @keyframes line-anim { to { stroke-dashoffset: 0; } }

Answer 1

將所有 animation css 移動到單獨的 class 中，動畫延遲除外。 添加滾動偵聽器並將此 class 添加到徽標中。

 document.addEventListener('scroll', function() { document.querySelector('.logo').classList.add('logo-animation') })

 .logo-animation { animation:line-anim 2s ease forwards } #logo:path { animation-delay: 2s; }