javascript - 使用 css3 和 jquery 分别动画缩放和旋转

Question

更新和澄清

我需要执行一些在图标上立即旋转(使用 css3 transform)的 jquery。然后一旦图标旋转，我想设置动画并缩放到 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

您确实有 2 个选择，但我认为嵌套的 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 演示 fiddle :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 演示 fiddle :http://jsfiddle.net/adjit/tR7EY/1/