在视口中启动动画

Question

我正在尝试让我创建的动画在屏幕视口中开始。

// Returns true if the specified element has been scrolled into the viewport.
function isElementInViewport(elem) {
  var $elem = $(elem);

  // Get the scroll position of the page.
  var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
  var viewportTop = $(scrollElem).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  // Get the position of the element on the page.
  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();

  return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
  var $elem = $('.image-container')

  if (isElementInViewport($elem)) {
    // Start the animation
    $elem.addClass('start');
  } else {
    $elem.removeClass('start');
  }
}

// Capture scroll events
$(window).scroll(function() {
  checkAnimation();
});

/* slide reveal aniamtion */

@keyframes left {
  0% {
    transform: translatex(-100%);
  }
  100% {
    transform: translatex(0%);
  }
}


/* animation */

.animated-container {
  width: 600px;
  height: 600px;
  background: #f5f5f5;
  overflow: hidden;
}

.image-container {
  width: 100%;
  height: 100%;
  background: pink;
  transform: translatex(-100%);
}

.start {
  animation: left 2s ease-out forwards;
}

.float-right {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animated-container">
  <div class="image-container">
  </div>
</div>

出于某种原因，class 在视图中似乎没有应用到容器框并且正在返回错误。谁能帮我解决这个问题以及为什么会阻止 javascript 添加 class.

Answer 1

第 68 行（checkAnimation 函数的第一行）显示为 $(".image-container');。请注意您是如何使用双引号来开始字符串，但使用单引号来结束它的。

只需将其更改为 $('.image-container') 就可以了:)

编辑。所以，现在你已经解决了上面的问题，但是 $ 没有定义。您正在使用 $(element) 但您尚未定义 $ 的作用或含义。将 jQuery 链接到您的项目怎么样？或者至少将 querySelector 函数的 $ 定义为 shorthand？

编辑 2。好的，现在它没有抛出任何错误，但它就是不起作用。好吧，它实际上确实添加了 .start class - 单独的开始 class 虽然不足以启动动画。您的 css 文件在带有 .left.start 的元素上添加了动画，因此要么将其更改为仅在 .start class 上触发，要么添加 .left class 就像你添加 .start class.

在视口中启动动画

Start animation in viewport

html

javascript

css

viewport