Firefox中的自述卷展动画断断续续

Self-written rollout animation stuttering in Firefox

本文关键字：动画 断断续续 Firefox      更新时间：2024-01-22

不久前，我开始用JavaScript编写一些代码来学习它。我选择了一个卷展栏/卷展栏动画作为"项目"。（我知道JQuery的slideDown/slideUp，但我想使用纯JavaScript。）

我完成了我的效果，除了Firefox（测试了从22.x到最新版本（25.0.1））之外，所有主要浏览器的效果都很好。在Firefox中，滚动（输入和输出）断断续续，而在Chrome、Opera和Internet Explorer中滚动则很平稳。

通常的方法是（毫不奇怪）在给定的时间内，将元素的style.height（或width）属性增加/减少若干像素。为了避免每次效果发生时都计算大小，我计算了一次，并将它们放在一个数组中（第一个项目（0+stepSize），最后一个项目需要高度/宽度）。元件高度的降低由以下功能完成：

var verticalRollInWorker = function(step) {
  if (step > 0) {
    $(btt).style.height = stepSizes[step - 1];
    setTimeout(function() { verticalRollInWorker(step - 1); }, delay);
  } else {
    $(btt).style.display = "none";
    $(btt).style.height = 0;
    // Enable roll out effect:
    stateChange(false);
    if (afterFullRollIn != null) {
      afterFullRollIn();
    }
  }
}

在这个特定的例子中，我在400ms上使用了20个步骤。数组中的步长被四舍五入为整数，这就是为什么最后一步只设置0-来处理舍入差异。

（为了方便起见，我编写了自己的$（element）helper，这里没有涉及JQuery。）

我测试了没有插件的Firefox，没有区别。

我非常感谢您能提供的任何帮助：）

我在上面的代码中注意到的一个问题是您使用了$（btt）。因此，每20秒迭代一次函数时，浏览器需要获得jQuery对象。您可以将其存储到一个变量中，比如"var BTT=$（BTT）；"并使用此BTT。获取jQuery对象是一项耗时的任务。

由于您使用的是setTimeout（），无论当前执行是否完成，该函数都将每20ms执行一次，这也可能导致拖动。正如Dagg Nabbit所说，您可以使用setInterval（）setTimeout的instad。

另一个可能的原因可能是浏览器回流。我制作了一个个性化的滚动条，发现FF中的浏览器回流明显大于Chrome或IE。这取决于元素的大小、DOM树深度、溢出属性等等。。。

再次使用此代码，看看它是否已修复。将减法减为1个代码。

var BTT=$(btt).get(0);
var verticalRollInWorker = function(step) {
  if (step > 0) {
    step--;
    BTT.style.height = stepSizes[step];
    setTimeout(function() { verticalRollInWorker(step); }, delay);
  }
  else {
    BTT.style.display = "none";
    BTT.style.height = 0;
    // Enable roll out effect:
    stateChange(false);
    if (afterFullRollIn != null) {
      afterFullRollIn();
    }
  }
}

只有在看到一个真实的例子后才能发表进一步的评论。当做

相关文章：