jQuery로 translate3d 애니메이션하기

Question

Jquery 2.1.1로 translate3d에 애니메이션을 적용하려고합니다. 10 초 후에 그런 다음 애니메이션이 끝나면 나에게 경고하고 싶습니다. 그러나 문제는 그것이 움직이지 않는다는 것입니다. 새로운 CSS로 즉시 변경됩니다.

나를 도와 줄 수있는 영웅이 있습니까? 애니메이션과 기본적으로

$(".circle").animate({ textIndent: 100 }, { 
    duration : 10000, 
    step : function() { 
     $(this).css("transform","translate3d(0px, 320px, 0px)"); 
    }, 
    complete : function() { 
     alert("completed the animation"); 
    } 
},'linear'); 

Answer 1

당신이 조금 같이 표시됩니다 jQuery를의 애니메이션 기능의 스텝 기능을 사용할 필요가 변환 :

는 코드 내가 지금 사용

$('.animate').animate({ 
    'opacity': '320' 
}, { 
    step: function (now, fx) { 
     $(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"}); 
    }, 
    duration: 10000, 
    easing: 'linear', 
    queue: false, 
    complete: function() { 
     alert('Animation is done'); 
    } 
}, 'linear'); 

을 텍스트 들여 쓰기를 별도로 설정해야하지만 기본적으로 잘못된 것을 수행하는 것은 계단 함수가 호출 될 때마다 값이 바로가는 대신 320px로 설정된다는 것입니다. 이것은 두 개의 분리 된 함수를 가지며 중요하지 않은 CSS 규칙을 사용하여 애니메이션 커브 전체에 필요한 값을 생성함으로써 처리 할 수 ​​있습니다. 여기

$('.animate').animate({ 
    'opacity': '320' 
}, { 
    step: function (now, fx) { 
     $(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"}); 
    }, 
    duration: 10000, 
    easing: 'linear', 
    queue: false, 
    complete: function() { 
     alert('Animation is done'); 
    } 
}, 'linear'); 
$(".animate").animate({ textIndent: 100 }, { 
    duration : 10000, 
    easing: 'linear', 
    queue: false 
}); 

는 작업입니다 : 당신은 또한이 애니메이션과 같을 것이다 코드의 다른

마지막 조각 후 1를 동시에 발생하지 않도록 false로 큐를 설정해야 바이올린 : 당신은 CSS3의 전환을 jquery.transit jQuery 플러그인을 사용할 수 있습니다

http://jsfiddle.net/Hive7/1qu2qxqh/

Answer 2

:

$('.box').transition({ rotate: '45deg' }); 
$('.box').transition({ scale: 2.2 }); 
$('.box').transition({ skewY: '30deg' }); 
$('.box').transition({ 
    perspective: '100px', 
    rotate3d: '1,1,0,180deg' 
}); 

아주 좋은 플러그인과 많은 기능

지연, 옵션 장치, 공급 업체 접두사, 완화 & 대기, 대체 완화/시간 구문, 상대 값, 변환 기원과 를 체인으로 연결

Demo Here