javascript - CSS 转换没有开始/回调没有被调用

Question

我有一个大型游戏元素，在其代码中大量使用了 jquery。前段时间我去掉了所有的 jquery 并用纯 JS 替换它，但我遇到的一件事是替换游戏中对射弹的 .animation 调用。

看来我应该用 CSS 转换替换它们，而游戏需要知道转换何时完成，所以我需要为转换添加一个回调。一切都很好，除了当我为射弹分配新的位置值时，过渡被完全跳过并且没有调用任何回调。出于某种不敬虔的原因，如果我将更改包装到 SetTimeout 中的 css 位置 1 毫秒，它就会开始工作——即使那样，有时它仍然会跳过过渡。

现在它通常可以正常工作，除了大约十分之一的时间会播放过渡但不会调用回调。我不知道为什么 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

有关为什么会发生这种情况的全面解释，请参阅 this Q/A , 和 this one .

基本上，当您设置新的样式时，浏览器仍未应用内联设置，您元素的计算样式仍将其显示值设置为""，因为它是不在 DOM 中的元素的默认值。它的 left 和 top 计算值仍然是 0px，即使您确实在标记中设置了它。

这意味着当 transition 属性将在下一帧绘制之前应用时，left 和 top 将已经是您设置的那些，因此转换将无事可做:它不会触发。

要绕过它，您可以强制浏览器执行此重新计算。确实a few DOM methods需要样式是最新的，因此浏览器将被迫触发也称为重排的操作。
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 Animation API ，即 supported almost everywhere (但在早已死去的 IE 中)。这将负责在正确的时间做正确的事情。

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";
});