在 JavaScript 中更改 HTML 元素的样式并暂时禁用其 CSS 转换无法可靠运行 [重复]

Posted 2023-03-06

技术标签:

【中文标题】在 JavaScript 中更改 HTML 元素的样式并暂时禁用其 CSS 转换无法可靠运行 [重复]【英文标题】：Changing an HTML element's style in JavaScript with its CSS transition temporarily disabled isn't reliably functioning [duplicate] 【发布时间】：2018-08-23 11:51:54 【问题描述】：

目前，我正在为一个网站制作动画，该动画涉及两个元素的位置在一段时间内发生变化，并且通常会重置为初始位置。一次只能看到一个元素，并且一切都应该尽可能顺利地运行。

在您问之前，纯 CSS 解决方案是不可能的，因为它是动态生成的并且必须同步。为了这个问题，我将使用一个非常简化的版本，它只包含一个向右移动的框。我将仅指后一个示例，除非明确说明此问题的其余部分以保持简单。

无论如何，移动由设置的 CSS transition 属性处理，因此浏览器可以为此完成繁重的工作。然后必须取消此转换，以便立即重置元素的位置。这样做的明显方法是这样做，然后在它需要再次移动时重新应用 transition，这也是立即的。但是，这是行不通的。不完全的。我会解释的。

查看此问题末尾或链接的 JSFiddle 中的 javascript，您会看到这就是我正在做的事情，但 setTimeout 会在两者之间增加 25 毫秒的延迟。这样做的原因是（最好你自己尝试一下）如果没有延迟（这是我想要的）或非常短的延迟，则元素将间歇性或持续保持在原位，这不是想要的效果。延迟越高，它就越有可能工作，尽管在我的实际动画中这会导致轻微的抖动，因为动画分为两部分工作，并且没有设计为有延迟。

这看起来确实可能是浏览器错误，但我已经在 Chrome、Firefox 52 和当前版本的 Firefox 上对此进行了测试，结果都相似。我不确定从哪里开始，因为我无法在任何地方找到报告的此问题或任何解决方案/解决方法。如果有人能找到一种方法来使其按预期可靠地工作，将不胜感激。 :)

Here is the JSFiddle page with an example of what I mean.

标记和代码也粘贴在这里：

var box = document.getElementById("box");
//Reduce this value or set it to 0 (I
//want rid of the timeout altogether)
//and it will only function correctly
//intermittently.
var delay = 25;

setInterval(function() 
  box.style.transition = "none";
  box.style.left = "1em";

  setTimeout(function() 
    box.style.transition = "1s linear";
    box.style.left = "11em";
  , delay);
, 1000);

#box 
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: absolute;
  top: 1em;
  left: 1em;

&lt;div id="box"&gt;&lt;/div&gt;

【问题讨论】：

【参考方案1】：

不要让transition 表现为动画，而是使用animation，它会做得更好，最重要的是在性能方面，并且不需要计时器来观看它。

通过animation 事件，可以以任何合适的方式同步动画，包括触发计时器以重新启动或更改它。

使用 CSS 设置某些部分

var box = document.getElementById("box");
box.style.left = "11em";    // start

box.addEventListener("animationend", animation_ended, false);

function animation_ended (e) 
  if (e.type == 'animationend') 
    this.style.left = "1em";

#box 
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: absolute;
  top: 1em;
  left: 1em;
  animation: move_me 1s linear 4;

@keyframes move_me 
  0%  left: 1em;

&lt;div id="box"&gt;&lt;/div&gt;

或完全基于脚本

var prop = 'left', value1 = '1em', value2 = '11em'; 

var s = document.createElement('style');
s.type = 'text/css';
s.innerhtml = '@keyframes move_me 0%  ' + prop + ':' + value1 +' ';
document.getElementsByTagName('head')[0].appendChild(s);

var box = document.getElementById("box");
box.style.animation = 'move_me 1s linear 4';
box.style.left = value2;      // start

box.addEventListener("animationend", animation_ended, false);

function animation_ended (e) 
  if (e.type == 'animationend') 
    this.style.left = value1;

#box 
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: absolute;
  top: 1em;
  left: 1em;

&lt;div id="box"&gt;&lt;/div&gt;

【讨论】：

它确实看起来更好。 @Teemu 这是一个纯 CSS 的解决方案吗？ ...样式是用脚本设置的 @Teemu 我更新了我的答案，以便更清楚地了解操作方法。我的 sn-p 不会重绘，它只会计算。此外，过渡元素不在文本流中，重新计算位置对浏览器来说是一项轻量级任务，以及在脚本执行后呈现页面。 @spacerGIF 一切都很好:)【参考方案2】：

在重置后设置新的过渡之前强制 DOM 重新计算自身。例如，这可以通过读取框的偏移量来实现，如下所示：

var box = document.getElementById("box");

setInterval(function()
      box.style.transition = "none";
      box.style.left = "1em";
      let x = box.offsetLeft; // Reading a positioning value forces DOM to recalculate all the positions after changes
      box.style.transition = "1s linear";
      box.style.left = "11em";  
    , 1000);

body 
  background-color: rgba(0,0,0,0);


#box 
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: absolute;
  top: 1em;
  left: 1em;

&lt;div id="box"&gt;&lt;/div&gt;