javascript - 滚动和显示时如何为元素设置动画

Question

我试图在元素的一部分或滚动到其位置后完全显示时对元素进行动画处理。当滚动到绝对位置(而不是对象的位置)时，我使用的代码会执行该操作。

我用的动画是SlideUp。我不知道编写代码来做到这一点。我需要一些帮助来编写该代码。任何人都可以介绍编写它的方法(最好有一个小例子)吗？

代码如下:

function reveal() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myDiv").className = "slideUp";
  }
}

/* When Class changed to slideUp, Animation will start */

.slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  visibility: visible;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

@-webkit-keyframes slideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

<!-- Div has absolutely positioned to avoid showing when page load first time|Because, User should scroll to it for animate it. -->
<div id="myDiv" style="position:absolute;top:1500px;left:1px;">
  <p>Example text</p>
</div>

Answer 1

当元素在滚动条上显示时为元素设置动画，wow.js是结合animate.css 的最佳资源

这样做的基本示例:

<div class="wow bounceInUp">
    Content to Reveal Here
</div>

不要忘记初始化它。

<script>
    new WOW().init();
</script>