如何防止JavaScript动画发生奇怪的振动[重复]答案

【问题标题】：How to prevent JavaScript animation occurring strange vibration [duplicate]如何防止JavaScript动画发生奇怪的振动[重复]
【发布时间】：2020-11-20 22:24:09
【问题描述】：

下面的代码是我目前正在尝试制作的。结果你只能看到一堆按钮，我想在用户滚动时隐藏按钮。因为我无法使用代码 sn-p 插入代码 :( 所以我只是在这里粘贴：

$(function() {
  $(window).on('scroll', function() {
    $('ul.side-sticky-nav').addClass('hide-side-sticky-nav');
    setTimeout(function() {
      $('ul.side-sticky-nav').removeClass('hide-side-sticky-nav');
    }, 150);
  });
});

ul.side-sticky-nav {
  list-style-type: none;
  padding: 0;
  width: 50px;
  margin: 8px;
  position: fixed;
  right: 0;
  bottom: 10%;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

ul.side-sticky-nav li {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
  margin: 8px 0;
  background: blue;
}

.hide-side-sticky-nav {
  right: -40px!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 2000px; background: gray;">
  <ul class="side-sticky-nav">
    <li>
      <a></a>
    </li>
    <li>
      <a></a>
    </li>
  </ul>
</div>

在js中使用动画应该注意什么？谢谢！

【问题讨论】：

在我看来，您的代码运行良好。我没有看到任何振动。

标签： javascript html jquery css animation

【解决方案1】：

这是为您的案例检测停止滚动事件的更简单方法。

$(function() {

  var st = $(window).scrollTop();
  setInterval(function() {
    if (st != $(window).scrollTop()) {
      $('ul.side-sticky-nav').addClass('hide-side-sticky-nav');
    } else {
      $('ul.side-sticky-nav').removeClass('hide-side-sticky-nav');
    }
    st = $(window).scrollTop();
  } ,300);

});

ul.side-sticky-nav {
  list-style-type: none;
  padding: 0;
  width: 50px;
  margin: 8px;
  position: fixed;
  right: 0;
  bottom: 10%;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

ul.side-sticky-nav li {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
  margin: 8px 0;
  background: blue;
}

.hide-side-sticky-nav {
  right: -40px!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 2000px; background: gray;">
  <ul class="side-sticky-nav">
    <li>
      <a></a>
    </li>
    <li>
      <a></a>
    </li>
  </ul>
</div>

【讨论】：

【解决方案2】：

也许你可以用 at_begin 对它应用 debounce

$(function() {
 function() toggleNav{
    const nav = $('ul.side-sticky-nav')
    if (nav.hasClass('hide-side-sticky-nav') {
      $('ul.side-sticky-nav').removeClass('hide-side-sticky-nav');
    }
    else {
      $('ul.side-sticky-nav').addClass('hide-side-sticky-nav');
    }
  }

  $(window).on('scroll', debounce(250, true, toggleNav));
});

这将在用户开始滚动后立即隐藏导航，并且在停止滚动后 250 毫秒后才会再次显示

您可以（至少）使用其中之一来获得去抖动功能：

http://benalman.com/projects/jquery-throttle-debounce-plugin/（未维护）
https://github.com/jashkenas/underscore/commit/9e3e067f5025dbe5e93ed784f93b233882ca0ffe（下划线.js）
Lodash https://lodash.com/docs#debounce（推荐）

他们的api几乎一样

【讨论】：