CSS过渡未启动/回调ISNN＆＃x27;

Question

我有一个大型游戏项目，该项目在其代码中使用了广泛的jQuery。不久前，我剥离了所有的jQuery，并用纯JS代替了它，但是我遇到的一件事是更换游戏中弹丸的动作呼吁。

看来我应该用CSS过渡替换它们，并且游戏需要知道何时完成过渡，因此我需要在过渡中添加回调。一切都很好，除非我为弹丸分配了新的位置值，否则过渡被完全跳过，没有调用回调。出于某种不敬虔的原因，如果我将更改包裹在SettieMout中的CSS位置为1毫秒的情况下，它开始有效，即使那样，有时它仍然会跳过过渡。

现在通常可以工作，除了大约10次过渡时，它将播放，但不会调用回调。我不知道为什么Settimeout会有所帮助，我不知道为什么回调有时不起作用。谁能帮我理解？

let tablehtml = '<div id="'+animid+'" style="position: absolute; left: ' + ammocoords.fromx + 'px; top: ' + ammocoords.fromy + 'px; background-image:url(\'graphics/' + ammographic.graphic + '\');background-repeat:no-repeat; background-position: ' + ammographic.xoffset + 'px ' + ammographic.yoffset + 'px; transition: left '+duration+'ms linear 0s, top '+duration+'ms linear 0s;"><img src="graphics/spacer.gif" width="32" height="32" /></div>';

document.getElementById('combateffects').innerHTML += tablehtml;
let animdiv = document.getElementById(animid);
animdiv.addEventListener("transitionend", function(event) { 
  FinishFirstAnimation();
}, false);

setTimeout(function() { Object.assign(animdiv.style, {left: ammocoords.tox+"px", top: ammocoords.toy+"px" }); }, 1); // THIS IS A TOTAL KLUDGE
// For some reason, the transition would not run if the 1ms pause was not there. It would skip to the end, and not
// fire the transitionend event. This should not be necessary.

Answer 1

有关为什么会发生这种情况的全面解释，请参见 /a 和这个。

基本上，在设置新的样式时，浏览器仍未应用一组内联，您的元素的计算样式仍然具有其 display> display 值设置为> '' “
，因为这是DOM默认值不在的元素。
它的左和 top 计算值仍然是 0px ，即使您确实在标记中设置了它。

这意味着，当过渡属性将在下一个帧绘画之前应用于左和 top 已经是您设置的，因此过渡将无关：它不会开火。

为了绕过它，您可以强迫浏览器执行此reecalc。的确，几个dom方法触发所谓的反流。
element.offsetheight getter是以下方法之一：

let tablehtml = `
<div id="spanky" 
  style="position: absolute; 
    left: 10px; 
    top: 10px; 
    background-color:blue; 
    width:20px; 
    height:20px;
    transition: left 1000ms linear 0s, top 1000ms linear 0s;">
</div>`;

document.body.innerHTML += tablehtml;

let animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) { 
  animdiv.style.backgroundColor='red';
}, false);
// force a reflow
animdiv.offsetTop;
// now animdiv will have all the inline styles set
// it will even have a proper display

animdiv.style.backgroundColor='green';
Object.assign(animdiv.style, {
  left: "100px", 
  top: "100px" 
});

但实际上，最好的可能是直接使用 web动画API ，几乎在任何地方支持 。这将在正确的时间照顾正确的事情。

let tablehtml = `
<div id="spanky" 
  style="
    position: absolute; 
    background-color:blue; 
    width:20px; 
    height:20px;
  "
</div>`;

document.body.innerHTML += tablehtml;

let animdiv = document.getElementById("spanky");
const anim = animdiv.animate([
    { left: "10px",  top: "10px"  },
    { left: "100px", top: "100px" }
  ],
  {
    duration: 1000,
    fill: "forwards"
  });

anim.finished.then(() => {
  animdiv.style.backgroundColor = "green";
});

Answer 2

这与新元素何时实际上是“绘制”的时间有关...

我知道这也是一个kludge，但是...

我发现100％成功的一种方式是等待两帧以下（在60fps约为33.333毫米的60fps处 - 但是如今的浏览器中的 settimeout 在幽灵或其他方面添加了人造“软糖” - 无论如何...

request> request> request> request> request> request> request> request> request> request> request> request> request>; gt; gt; gt; requestAnimationFrame（）=＆gt; {...您的代码...}）做同样的事情

let tablehtml = `
	<div id="spanky" 
  	style="position: absolute; 
    	left: 10px; 
      top: 10px; 
      background-color:blue; 
      width:20px; 
      height:20px;
      transition: left 1000ms linear 0s, top 1000ms linear 0s;">
</div>`;

document.body.innerHTML += tablehtml;
let animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) { 
  animdiv.style.backgroundColor='red';
}, false);
requestAnimationFrame(() => requestAnimationFrame(() => {
  animdiv.style.backgroundColor='green';
	Object.assign(animdiv.style, {
		left: "100px", 
  	top: "100px" 
	}); 
}));

让单个 requestAnimationFrame 对我来说大约是10分之一，但是双重请求使得不可能失败

Answer 3

通过遵循 settimeout（）> 。
但是对我而言， and.fined.then（（）=＆gt; {}）; 实际上未调用。调用此回调花了2毫秒。

对于我的情况， and.onfinish =（）=＆gt; {} 确保框架已绘制，并花费16毫秒来调用回调。