使用CSS3轉換：應用初始類似乎不工作

我想創建一個幻燈片，它將使用CSS3轉換時可用和類間動畫。但是，我無法設置從哪個初始值進行動畫處理。使用CSS3轉換：應用初始類似乎不工作

我所試圖做的是

起飛轉變如此舉動立即
設置需要我的元素的定位
反過來轉換回類
改變類，所以該動畫發生

我試圖使用的代碼是

item //set initial position 
    .css(vP + "transition", "") 
    .removeClass('left').removeClass("right").removeClass("center") 
    .addClass(toClass) 
    //move 
    .css(vP + "transition", css3Transition) 
    .removeClass(toClass) 
    .addClass('center');

然而，最初的類似乎並沒有被應用。

例子在行動在這裏http://jsfiddle.net/EcvBP/31/

我將如何去應用這個類（以便將項目轉變之前的重新定位）？

來源

2011-10-11 Tom

僅供參考，你可以做'item.removeClass（「左，右中心」）;'，而不是鏈接的方法3次 – Jason

我不能鍛鍊你的代碼，但我知道如何更一般地解決問題。首先，您需要刪除轉換css，並應用新的定位規則。然後你需要使用setTimout（...，10）重新添加轉換並設置新的位置。 – Gerben

以下Gerben的指針我能夠得到它的工作，工作代碼包含在下面的鏈接，解決方案是稍稍延遲過渡。

item 
    //set inital move from position 
    .css(vP + "transition", "") 
    .removeClass("left right center") 
    .addClass(toClass) 
    .delay(10, "doMove").queue("doMove", function(){ 
     //move 
     $(this).css(vP + "transition", css3Transition) 
     .removeClass(toClass) 
     .addClass("center"); 
    }).dequeue("doMove");

http://jsfiddle.net/EcvBP/37/

來源

2011-10-12 10:02:54 Tom

-1

我不認爲jQuery 可以添加你寫的格式的CSS屬性。你可以只寫一個CSS類像

.transition { 
-moz-transition: all 0.2s linear; 
-webkit-.... 
transition... 
}

然後用addClass（「過渡」）和removeClass（「過渡」）來添加和刪除過渡。

另外，嘗試只是「過渡」，而不是像你用過的瀏覽器前綴，但再次，不確定它實際上工作。

編輯：剛纔看到你需要補間速度。您可能需要使用插件，如plugins.jquery.com/plugin-tags/css3-transitions

來源

2011-10-11 17:54:26 Jerry

CSS屬性definetely可以這種方式添加，也需要瀏覽器前綴，問題是需要延遲，以便瀏覽器識別該類已被添加 – Tom

哦，很酷。不知道他們使用前綴。 – Jerry

使用CSS3轉換：應用初始類似乎不工作

回答

相關問題