jquery - 是否所有来自正确窃听器的 css 动画？

Question

我希望有一个设计，其中三个元素应该在用户滚动时通过不同的 css 动画进入 View :一个从顶部，一个从左侧，一个从右侧。但是，从那以后我发现所有从右边进入并在滚动事件上播放的 css 动画(至少使用 jQuery 来捕获它)都被窃听了。 错误是，当您用鼠标拖动滚动条时，它会跳回并在动画结束时卡在您开始的位置。

当您从左侧、顶部或底部设置动画时，不会发生此错误。

Here's a fiddle用下面的代码来演示:

HTML:

<div class="effect animated fadeInRight">
  <h3>Header</h3>
  <p style="text-align:justify">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
</div>

CSS(动画):

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

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
   -webkit-transform: none;
   -ms-transform: none;
   transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

jQuery:

function isElementInViewport(elem) {
  var $elem = $(elem);
  var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
  var viewportTop = $(scrollElem).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  var elemTop = Math.round( $elem.offset().top );
  var elemBottom = elemTop + $elem.height();

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

function checkAnimation() {
  var $elem = $('.effect');

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

$(window).scroll(function(){
  checkAnimation();
});

我想知道的是这是一个普遍的错误还是我做错了什么，无论如何如何解决它。我已经在不同的计算机上使用不同的浏览器确认了它。我也尝试过从右侧进入的不同动画，但它仍然是一样的。

有人能帮忙吗？

Answer 1

感谢 charlietfl 和对这个简单解决方案的一些试验:

将整个东西包装在一个 div 中(在我的例子中，我使用来自 Bootstrap 的 container)并像这样设计它:

.container {
  max-width: 100%;
  overflow: hidden;
}

这应该可以解决动画增加页面宽度并因此出现故障的问题。

Here's the fixed fiddle.