简单的CSS转换不起作用

Question

I have some problem with repeating animation in Firefox and Chrome. I use simple js to make it repeatable.

(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/

First iteration is ok in all browsers, but second and next doesn't apply css transition in FF39 and latest Chrome. And it's still work fine at all iteration in IE11.

How can I fix it?

Answer 1

尝试应用高度为0的高度，以确保在将显示设置为阻止后发生（这会阻止动画）

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

Answer 2

Try this..

Just remove coin7.style.display = 'none'; and thats the solution

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

Check out this Fiddle