javascript - 使用javascript在 View 中显示部分时发生动画

Question

我还在学习网页设计，我想在页面中间的 div 上开始动画。我搜索了它，但在任何地方我都使用 j-query 找到了它。有什么方法可以使用纯 CSS 和 JavaScript 来完成。

<div>A lot of contents which take whole screen</div>
<div>Section where animation has to happen when come into view</div>

如果只能使用javascript完成，请提供帮助，如果不能，那么最简单的方法是什么。

Answer 1

我只是像你一样搜索并找到了一个纯粹的js回答
REFERENCE

var elements;
var windowHeight;
document.getElementById('content').innerText = "A lot of content to fill up the page. ".repeat(500)

function init() {
  elements = document.querySelectorAll('.noanimfornow');
  windowHeight = window.innerHeight;
}

function checkPosition() {
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    var positionFromTop = elements[i].getBoundingClientRect().top;
//console.log(positionFromTop,windowHeight);
    if (positionFromTop - windowHeight <= 0) {
      element.classList.add('animateme');
      element.classList.remove('noanimfornow');
    }
        if (positionFromTop - windowHeight > 0) {/*newly added:Edit2*/
      element.classList.add('noanimfornow');
      element.classList.remove('animateme');
    }
  }
}

window.addEventListener('scroll', checkPosition);
window.addEventListener('resize', init);

init();
checkPosition();

@keyframes myanim {
  from {
    opacity: 0;
    transform: scale(.7, .7)
  }
  to {
    opacity: 1;
  }
}

.animateme {
  animation: myanim 5s;
}
.noanimfornow {
  opacity: 0;
}

<div id="content"></div>

<div class="noanimfornow">Section where animation has to happen when come into view</div>

首先对于只有在滚动时才需要动画的 div，将 class 设置为 noanimfornow ,

下一个 js我们检查滚动的位置，并将类设置为animateme当它进入视野时，

我们还会检查任何大小调整事件并开始 init如果需要，请在 js 中使用

最后我们在 css 中放了一些动画。