Запустить анимацию в окне просмотра

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') и все будет хорошо :)

---

EDIT . Итак, теперь вы исправили вышеуказанную проблему, но $ не определено. Вы используете $(element), но вы не определили, что делает или означает $. Как насчет связи jQuery с вашим проектом? Или хотя бы определить $ как сокращение для функции querySelector?

---

РЕДАКТИРОВАТЬ 2 . Хорошо, теперь он не выдает ошибок, но он просто не работает. Ну, на самом деле он добавляет класс .start - один только начальный класс, хотя этого недостаточно для запуска анимации. Ваш CSS-файл добавляет анимацию для элементов с .left.start, поэтому либо измените его, чтобы активировать только класс .start, либо добавьте класс .left так же, как вы добавляете класс .start.