尝试在视图中将类添加到div

Question

我非常非常新的JavaScript或除了html之外的任何代码。我发现了一个适合我需要的脚本。但它似乎只适用于Firefox。在Firefox中，当元素滚动到视图中时，它会将.animate和.slideToLeft类添加到div。 CSS来自animate.css。

为什么它不适用于chrome？

Code

function isElementInViewport(elem) {
  var $elem = $(elem);

  // Get the scroll position of the page.
  var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('move_Damn') != -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.

var $elem = $("maybe");

function checkAnimation() {
  if (isElementInViewport($elem)) {
    // Start the animation

    $elem.addClass('animated', 'slideInLeft');
  } else {
    $elem.removeClass('animated', 'slideInLeft');
  }
}

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

#move_Damn {
  width: 50px;
  height: 50px;
  background: #f00;
  padding: 3px;
  text-align: center;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.slideInLeft {
  animation-name: slideInLeft;
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="move_Damn" class="wontWork">
  why not
</div>

Answer 1

问题是你如何添加类

更改此

$elem.addClass('animated', 'slideInLeft');

到此

$elem.addClass('animated slideInLeft');

function isElementInViewport(elem) {
  var $elem = $(elem);

  // Get the scroll position of the page.
  var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('move_Damn') != -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.

var $elem = $("#move_Damn");

function checkAnimation() {
  if (isElementInViewport($elem)) {
    // Start the animation

    $elem.addClass('animated slideInLeft');
  } else {
    $elem.removeClass('animated slideInLeft');
  }
}

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

#move_Damn {
  width: 50px;
  height: 50px;
  background: #f00;
  padding: 3px;
  text-align: center;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.slideInLeft {
  animation-name: slideInLeft;
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="move_Damn" class="wontWork">
  why not
</div>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>