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

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 转换不起作用

Simple css transition doesn't work

javascript

css

transition