Javascript 使用css3和jquery分别设置缩放和旋转动画

更新和澄清

我需要执行一些jquery，对图标进行即时旋转（使用css3转换）。一旦图标旋转，我想制作动画并缩放到200%的大小。然而，由于缩放和旋转都是一个CSS3属性（变换），我看到这两个变换都是以0.5秒的动画形式出现的。（在JQUERY代码中，我还更新了位置（顶部，左侧），但因为它不在transition:tag中，所以它会根据需要立即发生）

我想要的是旋转立即发生，刻度在2秒以上发生。有什么想法吗

CSS:

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.5s以上的动画中发生。

简短回答：使用

答案很长：CSS3变换属性不能真正单独设置动画，除非您碰巧对变换矩阵很在行，并且准备编写大量支持代码以获得更好的动画系统。您不仅需要处理将变换属性转换为变换矩阵的问题，还需要某种系统来动态地混合不同的矩阵状态，以便实际能够解耦计时。这需要大量的高等数学和开发时间，而这些时间很可能最好花在其他地方

编辑：进一步阅读：

---

EDIT2：根据您的具体操作，您可以通过将动画拆分为多个嵌套div来分隔动画。最外层的div处理缩放动画，其中是一个带有旋转动画的div

您确实有两种选择，但我认为嵌套div很可能是您的最佳选择。您可以使用jQuery来控制某些动画的计时，但需要相当多的编码才能正确执行

根据Andrea Ligios的注释，您应该在

two

类上设置一个延迟，以便在

0.5s之后开始转换

HTML
下面是一个CSS演示小提琴：

jQuery选项涉及设置超时，唯一的问题是反向动画不会完全按照相反的顺序进行。它将以
.5s的间隔收缩和取消旋转。当然，您也可以为mouseout设置超时

jQuery选项
下面是一个jQuery演示小提琴：
如果在添加大型类之前创建一个旋转类并将其添加到元素中，而不是操作元素的css，会发生什么情况？我真的无法通过这种方式找到解决方案。我所做的是在javascript中根据鼠标按下的位置动态计算该图标的旋转。所以没有固定的旋转。我计算旋转，然后我希望元素同时旋转和增长。你能为这个问题创建一个小提琴吗？不是很确定，但是你能把它分成两个变换吗？旋转和缩放，然后再对其进行生长。这样你可以旋转100%，然后缩放25%，完成后，缩放最后的75%？@AdmiralAdama，只要计时函数是线性的，它就可以工作。对于更复杂的计时功能（比如，你想放松旋转，但放松缩放），这是不可能的。第二次编辑看起来是一个可能的答案。你认为你可以调整它使它工作吗？为什么它仍然是-1？我在答案+1.+1中看到了努力和一点价值。但请注意，他希望在第一个动画结束后开始第二个动画，而在CSS示例中，它们同时开始。您必须为第一次变换的长度的第二次变换设置延迟：
变换：所有2秒均缓进输出0.5秒其中0.5s是开始动画之前的延迟。
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)");
}

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

.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);
}

$('#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');
});