javascript - 简单的 css 过渡不起作用

Question

我在 Firefox 和 Chrome 中重复动画时遇到一些问题。我使用简单的js来使其可重复。

(function step() {
    setTimeout(function() {
        var coin7 = document.getElementById('coin7');
        coin7.style.display = 'block';
        coin7.style.height = "210px";
    }, 2000)

    setTimeout(function(){
        coin7.style.display = "none";
        coin7.style.height = "0";
    },6000);
    setTimeout(step, 7000)
})();

演示链接 http://jsfiddle.net/pe461zrn/

第一次迭代在所有浏览器中都可以，但第二次和下一次在 FF39 和最新的 Chrome 中不应用 css 转换。而且它在 IE11 中的所有迭代中仍然可以正常工作。

如何修复它？

Answer 1

尝试在超时 0 的情况下应用高度，这样您就可以确定它会在显示设置为阻止后发生(这会阻止动画)

setTimeout(function(){coin7.style.height = "210px";}, 0);