Animate.css without jQuery?

Question

我正在尝试在页面上制作动画。

我使用animate.css库。

该文档仅显示了如何将其与jQuery一起使用，但我目前正在学习如何使用vanilla javaScript。我试图使用window.pageyoffset，但这只有在浏览器到达容器时而不是在滚动揭示的情况下才起作用。

Answer 1

无jQuery（或任何其他库）的香草JS动画的另一个示例。

var v = 0;
var delta = 1;
function verticalMove() {
    redBox = document.getElementById('verticalDiv')
    v += delta;
    redBox.style.top = v + "px";
    if (v <= 0) delta = 1;
    if (v >= 50) delta = -1;
}
function startMove(event) {
    setInterval(verticalMove, 30);
    event.target.onclick="";
}

.verticalDiv {
  position: absolute;
  top: 0px;
  right: 500px;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="verticalDiv" id="verticalDiv" onclick="startMove(event)"></div>

Answer 2

这是一个示例，如何在没有jQuery的情况下进行动画。调查滚动事件的MDN DOC PAGE window.onscroll。

const $item = document.querySelector('.starred-item');
$item && ($item.classList.add('animated', 'bounce'));