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-transition”以进行进一步更改。（例如：scale（1,3）=＆gt; scale（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)")

});

Javascript的Css3动画：之后的缩放和过渡

1 个答案: