我正在創建跨瀏覽器兼容的旋轉（ie9 +），并且在jsfiddle中有以下代碼$(document).ready(function () { DoRotate(30); AnimateRotate(30);});function DoRotate(d) { $("#MyDiv1").css({ '-moz-transform':'rotate('+d+'deg)', '-webkit-transform':'rotate('+d+'deg)', '-o-transform':'rotate('+d+'deg)', '-ms-transform':'rotate('+d+'deg)', 'transform': 'rotate('+d+'deg)' }); }function AnimateRotate(d) { $("#MyDiv2").animate({ '-moz-transform':'rotate('+d+'deg)', '-webkit-transform':'rotate('+d+'deg)', '-o-transform':'rotate('+d+'deg)', '-ms-transform':'rotate('+d+'deg)', 'transform':'rotate('+d+'deg)' }, 1000); }CSS和HTML非常簡單，僅用于演示：.SomeDiv{ width:50px; height:50px; margin:50px 50px; background-color: red;}<div id="MyDiv1" class="SomeDiv">test</div><div id="MyDiv2" class="SomeDiv">test</div>使用時旋轉有效，.css()但使用時無效.animate(); 為什么會這樣，有沒有辦法解決？謝謝。
3 回答
繁花不似錦
TA貢獻1851條經驗 獲得超4個贊
如果您通過jQuery處理CSS3動畫，那么jQuery過渡可能會使您的生活更輕松。
EDIT 2014年3月 （因為自從我發表建議以來，我的建議一直在上下投票）
讓我解釋一下為什么我最初暗示上面的插件：
就性能而言，更新DOM每個步驟（即$.animate）都不理想。它可以工作，但很可能會比純CSS3過渡或CSS3動畫慢。
這主要是因為，如果您指出從頭到尾的過渡情況，瀏覽器將有機會思考。
為此，例如，您可以為過渡的每個狀態創建一個CSS類，并且僅使用jQuery切換動畫狀態。
通常這很整潔，因為您可以調整動畫以及CSS的其余部分，而不必將其與業務邏輯混合在一起：
// initial state
.eye {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
// etc.
// transition settings
-webkit-transition: -webkit-transform 1s linear 0.2s;
-moz-transition: -moz-transform 1s linear 0.2s;
transition: transform 1s linear 0.2s;
// etc.
}
// open state
.eye.open {
transform: rotate(90deg);
}
// Javascript
$('.eye').on('click', function () { $(this).addClass('open'); });
如果任何變換參數是動態的，那么您當然可以改用style屬性：
$('.eye').on('click', function () {
$(this).css({
-webkit-transition: '-webkit-transform 1s ease-in',
-moz-transition: '-moz-transform 1s ease-in',
// ...
// note that jQuery will vendor prefix the transform property automatically
transform: 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)'
});
});
有關MDN上CSS3過渡的更多詳細信息。
但是，還需要記住其他一些事項，如果您具有復雜的動畫，鏈接等，所有這些都會變得有些棘手，而jQuery Transit只是在幕后做了所有棘手的工作：
$('.eye').transit({ rotate: '90deg'}); // easy huh ?
- 3 回答
- 0 關注
- 1241 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消