我正在創(chuàng)建跨瀏覽器兼容的旋轉(zhuǎn)（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>使用時(shí)旋轉(zhuǎn)有效，.css()但使用時(shí)無效.animate(); 為什么會(huì)這樣，有沒有辦法解決？謝謝。
3 回答
繁花不似錦
TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超4個(gè)贊
如果您通過jQuery處理CSS3動(dòng)畫，那么jQuery過渡可能會(huì)使您的生活更輕松。
EDIT 2014年3月 （因?yàn)樽詮奈野l(fā)表建議以來，我的建議一直在上下投票）
讓我解釋一下為什么我最初暗示上面的插件：
就性能而言，更新DOM每個(gè)步驟（即$.animate）都不理想。它可以工作，但很可能會(huì)比純CSS3過渡或CSS3動(dòng)畫慢。
這主要是因?yàn)?，如果您指出從頭到尾的過渡情況，瀏覽器將有機(jī)會(huì)思考。
為此，例如，您可以為過渡的每個(gè)狀態(tài)創(chuàng)建一個(gè)CSS類，并且僅使用jQuery切換動(dòng)畫狀態(tài)。
通常這很整潔，因?yàn)槟梢哉{(diào)整動(dòng)畫以及CSS的其余部分，而不必將其與業(yè)務(wù)邏輯混合在一起：
// 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'); });
如果任何變換參數(shù)是動(dòng)態(tài)的，那么您當(dāng)然可以改用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)'
});
});
有關(guān)MDN上CSS3過渡的更多詳細(xì)信息。
但是，還需要記住其他一些事項(xiàng)，如果您具有復(fù)雜的動(dòng)畫，鏈接等，所有這些都會(huì)變得有些棘手，而jQuery Transit只是在幕后做了所有棘手的工作：
$('.eye').transit({ rotate: '90deg'}); // easy huh ?
添加回答
舉報(bào)
0/150
提交
取消