2d轉換語法

我試圖在一個元素上同時做幾個動畫。我想translate元素正確cooridnates，這似乎是工作，但我有麻煩「成長」的高度和寬度。有了這個語法，高度和寬度似乎不是動畫，我的語法是否關閉？2d轉換語法

width: 230px; 
height: 476px; 
-webkit-transform: translate(492px, 0px); 
transition: width 2s, height 2s, 0.5s; 
-webkit-transition: width 2s, height 2s, 0.5s;

目標是在0.5秒內將位置移動到正確的位置，並使其在2秒內擴展到全高。有什麼建議麼？

來源

2014-01-16 Barry Tormey

你已經解決了你的問題和我的回答呢？ –

不，如果我有，我會標記它是正確的。我的語法如下所示：[link]（http://jsfiddle.net/ZEJ9S/1/），但我相信我遇到的問題是在運行時動態添加它。 –

看到我的編輯，我更新了小提琴。 –

你忘了該效果的「型」，請參閱：

width: 230px; 
height: 476px; 
-webkit-transform: translate(492px, 0px); 
transition: width 2s linear 0.5s, height 2s linear 0.5s; 
-webkit-transition: width 2s linear 0.5s, height 2s linear 0.5s;

但不設置效果似乎改變什麼，因爲它有一個默認的一個。

我發現你只使用WebKit的過渡，而不是使用正常的過渡，請參閱：

$("#box3.box").css({ 
    "-webkit-transform": "translate(-260px, -" + row1height + "px) scale(1)", 
    "-webkit-transition-duration": "2s,2s,2s", 
    "-webkit-transition-property": "height, width", 
    "transform": "translate(-260px, -" + row1height + "px) scale(1)", 
    "transition-duration": "2s,2s,2s", 
    "transition-property": "height, width",   
    "height": "250px", 
    "width": "250px" 
});

注意我用了-webkit-transition和transition，由於Chrome似乎只能用transition工作。

下面是一個更新Fiddle這個工作在Chrome

來源

2014-01-16 16:08:37

回答

相關問題