CSS3 전환과 자바 스크립트 상호 작용

CSS 3 전환이 끝나면 특정 자바 스크립트 코드를 실행하는 방법이 있습니까?CSS3 전환과 자바 스크립트 상호 작용

예를 들어 나는 y 축에서 0에서 1까지의 눈금이 필요하고 그의 내용 가시성을 숨김에서 눈에 보이게 설정해야합니다. (가) 완료 변환 직후,

#contentWrapper { 
    visbility: hidden; 
    -webkit-transition: -webkit-transform 2s, visibility 0s linear 2s; 
} 
.scaleOn { 
    visibility: visible; 
}

2 초 후 .scaleOn 볼 수있게됩니다 visibility가 전환 될 수 있고, 전환 지연이있을 수 있습니다 -

<style> 
    .scaleOn {-webkit-transform: scaleY(1.0); -webkit-transition: -webkit-transform 2s; } 
    </style> 

    function setVisibility() { 
    $("#content").css({visibility: 'visible'}); 
    } 

    function dataHere() { 
    $("#contentWrapper").addClass('scaleOn'); // and now what? I need run setVisibility when transition ends 
    } 

    <div style="-webkit-perspective:200px"> 
    <div id="contentWrapper" style="-webkit-transform: scaleY(0.0)"> 
    <div id="content"></div> 
    </div> 
    </div>

출처

2013-12-08 Krab

이 질문을 확인하십시오 : http://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes – Keeper

Keeper가 말한대로 ['transitionEnd'] (https://developer.mozilla.org)를 사용하십시오./ko-US/docs/Web/Reference/Events/transitionend) –

은 어쩌면 당신은 모든 자바 스크립트가 필요하지 않습니다 .

출처

2013-12-08 18:57:48 janfoeh

그래, 실제로 2 초 후에 애니메이션이 100 % 완료 될지 확신 할 수 없다. – Krab

CSS3 전환과 자바 스크립트 상호 작용

답변

관련 문제