使用 css3 和 jquery 分别动画缩放和旋转答案

【问题标题】：animate scale and rotate separately with css3 and jquery使用 css3 和 jquery 分别动画缩放和旋转
【发布时间】：2023-03-23 06:25:01
【问题描述】：

更新和澄清

我需要执行一些在图标上立即旋转（使用 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 秒的动画中。

【问题讨论】：

如果在添加大类之前创建一个旋转类并将其添加到元素中，而不是操作元素的 css，会发生什么？
我真的不能这样寻求解决方案。我正在做的是在 javascript 中根据鼠标按下的位置动态计算此
图标的旋转。所以没有固定的旋转。我计算旋转，然后我希望元素旋转和增长。
你能解决这个问题吗？
不太确定，但你能把它分成两个转换吗？旋转和缩放，然后也增长它。这样你会旋转 100%，然后缩放 25%，然后在完成之后，缩放最后的 75%？
@AdmiralAdama 只有在时间函数是线性的情况下才会起作用。对于更复杂的计时功能（例如，你想缓和旋转，但缓和规模）变得不可能。

标签： javascript jquery css animation

【解决方案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 演示小提琴：http://jsfiddle.net/adjit/w4kgP/5/

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

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/

【讨论】：

+1。但请注意，他想在第一个动画结束后开始第二个动画，而在您的 CSS 示例中，它们同时开始。您必须为第一个变换长度的第二个变换设置延迟：transition: all 2s ease-in-out 0.5s; 其中 0.5s 是开始动画之前的延迟。

【解决方案2】：

简答：使用GSAP。

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

编辑：进一步阅读：How to read individual transform values in js

EDIT2：根据您要执行的操作，您可以通过将动画拆分到多个嵌套的 div 中来分离动画。例如。最外层的 div 处理缩放动画，其中包含一个带有旋转动画的 div。 CSSdeck example

【讨论】：

第二次编辑看起来像是一个可能的答案。你认为你可以调整这个JSFiddle 让它工作吗？
为什么还是 -1 ？我在答案中看到了努力和一点价值，+1。