javascript - 试图通过文本元素循环，并一一设置动画

Question

尝试构建一些东西并想知道我是否以正确的方式接近它。

我已经看到了一种效果，其中文本看起来会被剪裁并逐行滑入视图中，一个接一个。

这就是我构建它的方式，本质上是循环遍历每个文本元素并添加一个将其移动到视图中的类（我正在使用剪辑和翻译）。为了控制每个循环的延迟，我每次都增加一个变量。我的 CSS 感觉有点乱

Codepen 在这里：https ://codepen.io/shane-harley/pen/bGEBmGQ

想法？

let transitionTime = 0
    text.forEach(heading => {
      window.addEventListener('load', () => {
            heading.classList.add("active")
            heading.style.transitionDelay = transitionTime + "s"
            transitionTime = transitionTime + .2
        })
    })

标签： javascriptcsstransition