时间戳

首页 > 解决方案 > JS：元素样式=值；第一次出现两次时未执行

javascript - JS：元素样式=值；第一次出现两次时未执行

问题描述

对于一个网站，我制作了一个 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，它奏效了。但现在我想知道，是否有更清洁的方法来防止第一行不被执行，当然还有解释为什么会发生这种情况。

我感谢所有的帮助！

标签： javascriptcss

解决方案

只有在 CSS 引擎运行时，对 DOM 的更改才会反映到底层模型，这只有在 JS 停止运行时才会发生。通过使用setTimeoutJS 的执行结束，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 = '';
})();

推荐阅读