Question

对于一个网站，我制作了一个JS，以便在滚动时为div设置动画。我正在设置CSS最高值的动画，但是由于我对该属性应用了过渡，因此我不得不想出一种动画“顶部”的方法，而不会导致CSS过渡产生滞后。

我在函数中想到了这个

//Get the Div Element
var div = document.querySelector('.someclass');

//Disable Transition
div.style.transition= 'none';

//Change the top value - value was connected to scroll
div.style.top = anumber + 'px';

//Reset Transition to the CSS's file default
div.style.transition = '';

但是这又导致了不必要的延迟，因为它以某种方式忽略了“禁用过渡”步骤。

为确保将执行每个步骤，我提出了一个想法，将“重置”步骤包装到setTimeout函数中。我更改了这一行：

//Reset Transition to the CSS's file default
div.style.transition = '';

to

//Reset Transition to the CSS's file default
setTimeout(function () {
   div.style.transition = '';
},1);

塔达阿（Tadaa）成功了。但是现在我想知道，是否有一种更清洁的方法来防止第一行不被执行，当然还有一个解释为什么它甚至会发生。

感谢所有帮助！

Answer 1

对DOM的更改仅在CSS引擎运行时反映到基础模型中，这仅在JS停止运行时才会发生。通过使用setTimeout，JS的执行结束，CSS引擎有时间运行，然后计时器启动，JS重新运行。

您可以使用以下方法更优雅地解决ut：

 const tick = () => new Promise(resolve => setTimeout(resolve));

 (async function() {
   //Get the Div Element
   var div = document.querySelector('.someclass');
   //Disable Transition
   div.style.transition= 'none';
   //Change the top value - value was connected to scroll
   div.style.top = anumber + 'px';

   await tick();

   //Reset Transition to the CSS's file default
  div.style.transition = '';
})();

JS：element.style = value;第一次出现两次时未执行

1 个答案: