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>

由于某种原因，该类在查看时似乎未应用于容器框，并返回错误。谁能帮助我解决这方面的问题以及为什么它会阻止javascript添加类。

Answer 1

第68行（checkAnimation函数的第一行）显示为$(".image-container');。请注意，如何使用双引号将字符串开头，而将单引号括起来。

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

编辑。因此，现在您已经解决了上述问题，但是尚未定义$。您正在使用$(element)，但尚未定义$的作用或含义。如何将jQuery链接到您的项目？还是至少将$定义为querySelector函数的简写？

编辑2 。好的，现在它不会引发任何错误，但是它根本无法正常工作。好吧，实际上它确实添加了.start类-仅靠start类不足以启动动画。您的css文件使用.left.start在元素上添加了动画，因此可以将其更改为仅在.start类上触发，也可以像添加.left类一样添加.start类。

在视口中开始动画

1 个答案: