jquery - 如何优化 jQuery 和 CSS - 抖动滚动过渡

Question

我在这里没有找到解决我的解决方案的答案 -

我最近在我的个人网站上实现了一堆 addClass 和 removeClass jQuery 行为，当元素进入视图时触发。我将 CSS 设置为像素大小，使其脱离屏幕，当元素滚动到时，将向元素添加一个类，使其重新出现在屏幕上。

我在控制台中没有收到任何 JS 错误，并且我的所有图像都被压缩了。不知道是什么原因造成的，但看起来很恶心。任何提示都会很棒。

这是网站 -内联链接

jQuery 函数示例

  $(window).scroll(function() {
    var sT = $(this).scrollTop();
    var sB = sT + $(window).height();
    var tag = $(".outer-box-l-1");

    if ($(tag).position().top < sB) {
      $(tag).addClass("visible");
    } else {
      $(tag).removeClass("visible");
    }
  });

CSS

.outer-box-l-1 {
  display: inline-block;
  margin: 0px 8px 40px 8px;
  width: 35%;
  max-width: 1200px;
  list-style: none;
  text-align: center;
  z-index: unset;
  opacity: 0;
  transform: translate(-850px, 0);
  transition: all 0.5s;
}

.outer-box-l-1.visible {
  transform: translate(0, 0);
  opacity: 1;
}

标签： jqueryperformance