2013-05-31 1 views
5

요소가 CSS3 전환으로 현재 애니메이션으로 작동 중인지 자바 스크립트에서 감지하는 방법이 있습니까?CSS3 전환이 실행되고 있는지 확인하십시오.

"transitionstart"-event ('transistionend'이벤트와 동등)도 효과가 있지만 사양에서 아무런 언급을 찾을 수 없습니다. 만 transitionend 이벤트가 있기 때문에

+1

http://stackoverflow.com/questions/2794148/css3-transition-events, http://stackoverflow.com/questions/ ... 원래 문제를 해결하는 또 다른 경로를 취할 필요 7264899/detect-css-transitions-javascript-and-without-modernizr을 사용하고 있습니까? – coma

+1

첫 번째 링크의 답변은 "transistionend"에 초점을 맞추고 두 번째 링크는 css3 transistions의 기능 감지에 대해 설명하므로 불행히도 도움이되지 않습니다. :/ – johnny

+0

내 대답이 유용 했습니까? – coma

답변

2

음, 추한 (http://www.w3.org/TR/css3-transitions/#transition-events) 무언가가 내 마음에 오는 :

http://jsfiddle.net/coma/psbBg/6/

JS

$(function() { 

    var div = $('div'); 
    var property = div.css('transition-property'); 
    var lastValue = div.css(property); 

    setInterval(function() { 

     if(lastValue !== div.css(property)) { 

      console.log('changed!'); 

     } 

     lastValue = div.css(property); 

    }, 10); 

}); 

그것은 사용자 정의 이벤트를 구현 개선 할 수 있습니다, 올바른 전환 속성 (또는 속성) 및 더 많은 아이디어를 얻는 데주의를 기울이지 만 사진을 올바르게 얻을 수 있습니까?

은 아마 당신은

+2

나는 당신이 'transistion'이 아닌 'transform'속성을 확인한다는 의미라고 생각합니까? 그러나 나는 그 아이디어를 얻는다. 그것은 약간 짐승 같은 것으로 보입니다. 그러나 그것은 아마도 유일한 길일 것입니다. 감사! – johnny

+0

오, 고마워, 지금은 전환 속성을 사용하고 있습니다 : http://jsfiddle.net/coma/psbBg/6/ – coma

관련 문제