生澀的動畫-jquery/CSS3

我想結合jQuery和CSS3給予流暢的動畫，但我仍然發現動畫可以是生澀的，甚至在桌面上。生澀的動畫-jquery/CSS3

我正在使用以下方法將我的id從頁面一側移動到頁面上。

$(id).addClass('active').css({ left: pageWidth }) 
         .animate({left: 0}, 500, function(e){deferred.resolve()}) 
         .css("-webkit-transform", "translate3d(0px,0px,0px)") 
         .css("-moz-transform", "translate3d(0px,0px,0px)") 
         .css("-ms-transform", "translate3d(0px,0px,0px)") 
         .css("-o-transform", "translate3d(0px,0px,0px)") 
         .css("transform", "translate3d(0px,0px,0px)");

任何人都可以給任何建議，如果還有什麼我可以做的嗎？

來源

2014-11-05 ccdavies

添加'translate3d（...）'並沒有改變你的代碼仍在用'setTimeout'做動畫--jQuery做動畫的方式。您應該谷歌的'css3動畫教程' – Adam 2014-11-05 15:15:39

作爲一個提示，你可以看看[jQuery的轉換]（http://ricostacruz.com/jquery.transit/） – empiric 2014-11-05 15:17:14

備註：您可以將多個CSS設置組合成一個單一的對象，避免函數調用開銷：例如'.css（{「 - webkit-transform」：「translate3d（0px，0px，0px）」，「-moz-transform」：「translate3d（0px，0px，0px）」}）' – 2014-11-05 15:20:56

使用像velocity這樣的插件/擴展程序在幕後爲您自動使用CSS動畫。

我們最近使用它來避免移動設備上的動畫效果不佳，並且它改進了很多。

來源

2014-11-05 15:22:52

如果你想要更流暢的動畫，並且可以使用CSS3而沒有任何限制，那麼你可以使用CSS3關鍵幀。

看看這個所謂的Animate.css CSS3動畫集合：

http://daneden.github.io/animate.css/

這使得使用運行流暢真的CSS3的關鍵幀。您可以編輯動畫或創建新動畫，具體取決於您想要創建的動畫。利用關鍵幀，您可以在任何框架上設置動畫的狀態，以便根據構建方式使其看起來像平滑一樣。

看看這篇文章，瞭解關鍵幀，如果你不想使用上Animate.css的那些嘗試修改他們或建立你自己：

http://css-tricks.com/snippets/css/keyframe-animation-syntax/

對於要animmation獲得代碼並不困難。你可以使用jQuery動畫來做到這一點，但如果你在框架上工作得更好，關鍵幀將運行更平滑。

來源

2014-11-05 15:23:00

生澀的動畫-jquery/CSS3

回答

相關問題