javascript - 切换类的CSS动画无法在Chrome中正确切换帧

大约三年前，我使用iFile中的文本编辑器在iPod Touch上编写了Flash游戏Chat Noir的HTML5 / CSS3重制版（对不起，短名称和混乱的代码）。游戏可以在这里找到：http://geckojsc.com/misc/iChatNoir/在过去的几个月中，我注意到动画（使用CSS Sprite制作）不再能够在Chrome中正常工作（在其他现代浏览器中效果很好）。因为游戏是在六边形网格上进行的，所以精灵表中存在三个方向：对角向下，对角向上和侧向（因此，D，U和S类的选择器）。 DJ，UJ和SJ类是相同的，但显示出猫跳中期。 L级表示猫指向左，R级表示猫指向右（图像被翻转）。.D {background-position:0px 0px;}.U {background-position:-50px 0px;}.S {background-position:-98px 0px;}.DJ {background-position:0px -50px;}.UJ {background-position:-50px -50px;}.SJ {background-position:-98px -50px;}.L { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -o-transform: scale(1,1);}.R { -webkit-transform: scale(-1,1); -moz-transform: scale(-1,1); -o-transform: scale(-1,1);}动画化这些框架的javascript如下（cat是div元素）：if (catY%2) { if (catX<aim.x) catDir="R"; else catDir="L";} else { if (catX<=aim.x) catDir="R"; else catDir="L";}if (aim.y>catY) catDir+=" D";else if (aim.y<catY) catDir+=" U";else catDir+= " S";catX=aim.x; catY=aim.y;updateCat(); // makes cat.className = catDir// make the cat jump, then return to standing after 140 ms:cat.className += "J";setTimeout(function() { cat.className = cat.className.slice(0,-1);},140);在Chrome中，猫会转到其“跳跃”帧，但此后不会返回到站立帧。我在程序运行时检查了cat.className，并且在我所有的测试浏览器中，它的确正确更改，例如从L DJ更改为L D，但是即使className为。这似乎是某种渲染问题。如果我更改页面缩放级别，或切换到另一个选项卡，然后再切换回去或执行任何其他重绘页面的操作，则猫会显示正确的框架。希望有某种方法可以解决此问题！ (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 我设法通过添加一个小的不可见边框并立即将其删除来解决该问题，如下所示：function forceRedraw(e) { e.style.border = 'solid 1px transparent'; setTimeout(function() { e.style.border = 'solid 0px transparent'; }, 0);}（来自Force DOM redraw/refresh on Chrome/Mac）将显示样式设置为“ none”，然后在0ms之后将其还原为“ block”也可以，但是这可能会导致元素轻微闪烁，这就是为什么我选择这种解决方案的原因。 (adsbygoogle = window.adsbygoogle || []).push({});