與jQuery Animate 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').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'); 

你將不得不單獨設置文本縮進，但基本上你做錯了什麼，每次調用step函數時，值都被設置爲320px，而不是像它那樣。這可以通過使用兩個單獨的函數並使用不重要的CSS規則來創建跨動畫曲線所需的值來解決。你還需要將隊列設置爲false，這樣兩個動畫發生在同一時間，而不是一個代碼的其他

的最終代碼段後應該是這樣的：

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

這裏是一個工作小提琴：

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

Answer 2

您可以使用jquery.transit jQuery插件CSS3過渡：

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

很好的插件，並且許多功能

延時功能，可選單位，供應商前綴，鏈接&排隊，備用 寬鬆/時間語法，相對的價值，轉型起源和 緩解

Demo Here