javascript - 使用 vanilla JS 在视口(viewport)中切换时的 CSS 动画

Question

所以我用 CSS 制作了不同的动画，但问题是它们在页面加载时立即开始(当然)。我不想要这个。有没有办法在 Vanilla JavaScript 中让动画仅当它在视口(viewport)中时启动？我搜索了很多地方，但要么找到我需要使用的插件，要么找到 jQuery。

HTML:

    <div class="introduction">
    <h1>I can do the following for you:</h1>
    <ul>
        <li>Create a custommade, new website.</li>
        <li>Code a PSD template into a working website.</li>
        <li>Rework an outdated website.</li>
        <li>Clean up messy code of a website.</li>
    </ul>
    </div>

CSS:

@keyframes showOnLoad {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.introduction li {
    list-style-type: none;
    margin-bottom: 5px;
    text-align: center;
    opacity: 0;
    -webkit-animation: showOnLoad;
    animation: showOnLoad;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.introduction li:nth-child(2) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.introduction li:nth-child(3) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.introduction li:nth-child(4) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

Answer 1

这是您需要的代码。

window.addEventListener("scroll", onScroll);

function onScroll() {
  for (var item of document.querySelectorAll(".introduction li")) {
    elementVisible(item);
  }
}

function elementVisible(el) {
  let top = el.offsetTop;
  let height = el.offsetHeight;
  let bottom = top + height;

  let IsOverBottom = top > (window.pageYOffset + window.innerHeight);
  let IsBeforeTop = bottom < window.pageYOffset;

  if (!IsOverBottom && !IsBeforeTop) {
    el.classList.add("show");
  }
}

还有一点CSS

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

.show {
  animation: slideIn 5s ease-in-out;
}

这是一个基本的实现，但它让您更接近。

http://jsbin.com/hetapaj/1/edit?css,js,output