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

Question

我希望有一个设计，其中三个元素应该在用户滚动时通过不同的 css 动画进入视图：一个从顶部，一个从左侧，一个从正确的。然而，我后来发现所有从右侧进入并在滚动事件上播放的 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.

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

Are all css animations that come in from the right bugged?

jquery

css

css-animations