CSS3動畫由使用Javascript：規模與轉變之後

Question

我的html代碼：

<img id="img" src="http://piximus.net/media/9307/thumb.jpg" width="50" /> 

和Javascript：

$(function() { 
    $("#img").css("-webkit-transform-origin", "left top") 
    $("#img").css("-webkit-transform", "scale(1, 3)") 
    $("#img").css("-webkit-transition", "-webkit-transform 5s linear") 
}); 

我想看看：縮放（動態）圖像立即設置「-webkit-過渡「以進一步改變。 （例如：規模（1,3）=>規模（3,1）） 但一樣工作：

$("#img").css("-webkit-transition", "-webkit-transform 5s linear") 
$("#img").css("-webkit-transform", "scale(1, 3)") 

的jsfiddle例如：http://jsfiddle.net/B4cxq/2/

怎麼辦？

Answer 1

當元素#img的轉換完成時，您可以應用新的css屬性。 這可以通過註冊到轉換結束事件來完成。看到下面的代碼

$(function() { 
    $("#img").css("-webkit-transform-origin", "left top") 

    $("#img").css("-webkit-transition", "-webkit-transform 5s linear") 
    $("#img").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
     $("#img").css("-webkit-transform", "scale(3, 1)") 
    }); 

    $("#img").css("-webkit-transform", "scale(1, 3)") 

});