小编Mad*_*ter的帖子

CSS 转换未开始/未调用回调

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

看来我应该用 CSS 过渡替换它们,而游戏需要知道过渡何时完成,所以我需要为过渡添加回调。一切都很好,除了当我为弹丸分配新的位置值时,过渡被完全跳过并且没有调用回调。出于某些不道德的原因,如果我将其 css 位置的更改包含在 SetTimeout 中 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) { …
Run Code Online (Sandbox Code Playgroud)

javascript css callback css-transitions

3
推荐指数
1
解决办法
386
查看次数

标签 统计

callback ×1

css ×1

css-transitions ×1

javascript ×1