루핑 CSS3 전환

Question

CSS3 전환을 반복하려고합니다. 전환을 시작하고 전환 이벤트를 수신하기 위해 클래스에 요소를 추가하는 것이 좋습니다. 이벤트가 시작되면 클래스가 제거되고 다시 시작됩니다. 여기

var transition = function() { 
    // add class to start the transition 
    flipper.addClass('flipped'); 

    flipper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { 
     // remove class when transition is done 
     flipper.removeClass('flipped'); 
     transition(); 
    }); 
} 

이 문제는 클래스가 이벤트가 발생되지 않습니다 두 번째 시간이 추가 될 때 그것은 단지, 처음 실행되는입니다 fiddle with the code

입니다.

전환을 반복하는 다른 방법이 있습니까?

Answer 1

다시 추가하기 전에 브라우저에서 클래스를 제거 할 수 없으므로 스타일을 다시 설정하지 않습니다. 수정이의 1ms의 지연 ...

flipper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { 
    // remove class when transition is done 
    $('#console').append('[removing class]'); 
    flipper.removeClass("flipped"); 
    setTimeout(function() { 
     transition(); 
    }, 1); 
}); 

퍼팅

Modified jsFiddle link

참고 :이

당신은 ...과 같이 시간 제한 호출에 매개 변수로

을 transition를 전달할 수

setTimeout(transition, 1); 

내가 하하는 것처럼 그것은 단지 습관 일뿐입니다. 위.