动画缩放并使用css3和jquery单独旋转

Question

更新和澄清

我需要执行一些jquery,它在图标上立即旋转(使用css3 转换).然后一旦图标旋转,我想要动画并缩放到200%的大小.但是,由于缩放和旋转都是一个CSS3属性(变换),我看到两个过渡都是0.5秒的动画.(在JQUERY代码中我也更新了位置(顶部,左侧),但由于它不在transition:标签中,因此会根据需要立即更新).

我想要的是旋转立即发生,并且规模发生超过2秒.有任何想法吗？

CSS:

transition: transform 0.5s;
-webkit-transition: -webkit-transform 0.5s;

JQUERY:

self.pick = function (cmd) {
    var pt = Tools.cmdToPoint(cmd);
    $(self.bbox).css("position", "fixed");
    $(self.bbox).css("top", pt.y - 32);
    $(self.bbox).css("left", pt.x - 32);
    $(self.bbox).css("opacity", "1");
    var theta = self.angle(cmd);
    $(self.bbox).css("transform", "rotate(" + theta + "deg) scale(2.0)");
    $(self.bbox).css("-webkit-transform", "rotate(" + theta + "deg) scale(2.0)");
}

会发生的事情是,自项目转换以来,缩放和旋转都会在超过0.5秒的动画中发生.

Answer 1

你真的有两个选择,但我认为嵌套div很可能是你最好的选择.您可以使用jQuery来控制某些动画的时间,但是需要大量的编码才能使其正确.

根据Andrea Ligios评论,您应该在two课程上设置延迟,以便之后开始转换0.5s

HTML

<div id="rotate" class="half rotate">
    <div id="scale" class="two grow">Rotate</div>
</div>

CSS

.half {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.two {
    transition: all 2s ease-in-out 0.5s;
    -webkit-transition: all 2s ease-in-out 0.5s;
}

#rotate, #scale {
    height: 150px;
    width: 100px;
    text-align: center;
    margin: 0 auto;    
}

#scale {
    border: 1px blue solid; /*for visualization*/
}

.rotate:hover {
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
}

.grow:hover {
    transform: scale(2.0);
    -webkit-transform: scale(2.0);
}

这是一个CSS演示小提琴:http://jsfiddle.net/adjit/w4kgP/5/

您的jQuery选项涉及设置超时,唯一的事情是反向动画不会完全按相反的顺序.它会以一定的间隔收缩和不旋转.5s.您也可以为mouseout设置超时

jQuery选项

$('#rotate-scale').hover(function(){
    clearTimeout(timeout);

    $this = $(this);
    $this.addClass('rotate');
    timeout = setTimeout(function(){
        $this.css("-webkit-transition", "all 2s ease-in-out");
        $this.addClass('grow');
    }, 500);
}, function(){
    clearTimeout(timeout);
    $(this).css("-webkit-transition", "all 0.5s ease-in-out");
    $(this).removeClass('rotate');
    $(this).removeClass('grow');
});

这是一个jQuery演示小提琴:http://jsfiddle.net/adjit/tR7EY/1/