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

Demolink http://jsfiddle.net/pe461zrn/

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

我该如何解决？

Answer 1

尝试使用超时0应用高度，这样你就可以确定在显示设置为阻止后会发生这种情况（这会阻止动画）

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

Answer 2

试试这个..

只需删除coin7.style.display = 'none';，这就是解决方案

HTML

<div id="coin7" style=""> 
  <img src="http://us.cdn4.123rf.com/168nwm/kristijanzontar/kristijanzontar1101/kristijanzontar110100013/8612198-.jpg" /> 
  </div>

CSS

#coin7 {
      overflow: hidden; display: block; height: 0px;
        -moz-transition: all 3s ease-in-out;
        -webkit-transition: all 3s ease-in-out;
        -o-transition: all 3s ease-in-out;
        -ms-transition: all 3s ease-in-out;
        transition: all 3s ease-in-out;
        }

的Javascript

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

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

查看此Fiddle

简单的css转换不起作用

2 个答案: