css轉換不起作用

我已經建立了一個使用css的旋轉木馬。轉盤由'ul'標籤構建。當左/右導航時，我會在列表的左側或右側添加一個'li'（克隆相關值並附加/預先設定）。然後，我正在修正'ul'的左邊值，並使用動畫的css轉換移動'ul'。這用於通過動畫實現無盡的導航效果。
該動畫非常適合'下一個'導航，但無法在'後面'上工作。對我來說最令人困惑的部分是，當調試「後退」代碼時，動畫確實起作用！（也許這是一個時間的問題，但是，爲什麼「下一個」工程???）的問題css轉換不起作用

的演示是在這裏：jsfiddle

請注意：這不是我真正的代碼。真正的代碼被封裝在一個面向對象的插件中，對用戶快速點擊向前和向後的情況以及使用jQuery'animate'的polyfill進行驗證。我也考慮過使用現成的插件，但要求不符合我發現的要求...

來源

2012-10-07 Yaniv Efraim

我假定它以某種方式相關的定時。將settimeout添加到動畫時，問題消失。有任何想法嗎？看[示例]（http://jsfiddle.net/efraimya/wBm2R/12/） –

這個問題讓我有些困惑;當在中間添加警報（圍繞addClass調用）時，它似乎工作一點。這可能與瀏覽器DOM更新的時間有關，至少對我來說，這是一個巨大的兼容性紅旗。

既然你依靠jQuery 反正，我會建議，而不是你去與jQuery動畫。代碼更小，功能得到支持，並可在CSS3以前的瀏覽器中使用。我嘲笑了a fiddle, based on yours，它完全符合你對自己的期望，只是用.animate()代替。

請注意，我使用swing jQuery緩動;如果你想要更多的緩存類型（比如你在CSS中的ease-in-out），請試試jQuery easing plugin。使用（上.prev按鈕）

代碼：

$('.prev').on('click', function() { 
    var $childelement = $('ul'); 
    $childelement.children('li').last().clone().prependTo($childelement); 
    $childelement.css({ 
     'left': '-150px' 
    }).animate({ 'left': '-50px' }, 400, "swing", function() { 
     console.log('transition ended'); 
     $childelement.children('li').last().remove(); 
    }); 
});

來源

2012-10-07 06:27:33 Eric

謝謝。我有一個確切的代碼作爲老式瀏覽器的polyfill。問題在於，jQuery animate和css3轉換之間存在巨大的性能差異。在這兩種方法之間切換時，您實際上可以看到差異。請參考[this]（http://stackoverflow.com/questions/10984771/whats-faster-css3-transitions-or-jquery-animations） –

@Yaniv由於jQuery 1.8，這是微不足道的（他們重新設計了動畫代碼1.8）。此外，該博客上的測試顯示同時動畫1,849項* *。但是，如果你仍然如此擔心，可以使用[this插件]（http://ricostacruz.com/jquery.transit/），它使用jQuery爲你自動化CSS3轉換。 – Eric

css轉換不起作用

回答

相關問題