javascript 使用 css3 和 jquery 分别动画缩放和旋转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24194073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
animate scale and rotate separately with css3 and jquery
提问by Dr.YSG
UPDATED and CLARIFIED
更新和澄清
I need to execute some jquery that does an immediate rotate (using css3 transform) on an icon. And then once the icon is rotated I want to animate and scale to 200% of the size. However, since scale and rotate are both one CSS3 property (transform) I am seeing that both of the transitions are occurring as an animation for 0.5s. (in the JQUERY code I also update the location (top, left), but since that is not in the transition: tag, it happens immediately as required).
我需要在图标上执行一些立即旋转（使用 css3变换）的jquery 。然后一旦图标旋转，我想设置动画并缩放到 200% 的大小。但是，由于缩放和旋转都是一个 CSS3 属性（转换），我看到这两个转换都作为 0.5 秒的动画发生。（在 JQUERY 代码中，我还更新了位置（顶部、左侧），但由于这不在 transition: 标记中，因此它会根据需要立即发生）。
What I want is the rotate to happen immediately, and the scale to happen over 2s. Any ideas?
我想要的是立即发生旋转，并在 2 秒内发生缩放。有任何想法吗？
CSS:
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)");
}
What happens is that since transition on the item, both the scale and the rotate occur in an animation over 0.5s.
发生的情况是，由于项目上的过渡，缩放和旋转都发生在 0.5 秒以上的动画中。
回答by Adjit
You really have 2 options, but I think nested div's will most likely be your best option. You can use jQuery to control the timing of certain animations, but it will require a decent amount of coding to get it right.
您确实有 2 个选择，但我认为嵌套 div 很可能是您的最佳选择。您可以使用 jQuery 来控制某些动画的时间，但需要大量的编码才能使其正确。
Per Andrea Ligioscomment, you should set a delay on the twoclass so that the transition starts after 0.5s
根据Andrea Ligios评论，您应该在two课程上设置延迟，以便转换在0.5s
HTML
HTML
<div id="rotate" class="half rotate">
<div id="scale" class="two grow">Rotate</div>
</div>
CSS
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);
}
Here is a CSS demo fiddle : http://jsfiddle.net/adjit/w4kgP/5/
这是一个 CSS 演示小提琴：http: //jsfiddle.net/adjit/w4kgP/5/
Your jQuery option involves setting timeouts, the only thing is the reverse animation doesn't go exactly in the reverse order. It will shrink and un-rotate with an interval of .5s. You can ofcourse also set a timeout for mouseout
您的 jQuery 选项涉及设置超时，唯一的问题是反向动画不会完全按照相反的顺序进行。它将以 的间隔收缩和不旋转.5s。您当然也可以为 mouseout 设置超时
jQuery Option
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');
});
Here is a jQuery demo fiddle : http://jsfiddle.net/adjit/tR7EY/1/
这是一个 jQuery 演示小提琴：http: //jsfiddle.net/adjit/tR7EY/1/
回答by thykka
Short answer: Use GSAP.
简短回答：使用GSAP。
Long answer: CSS3 transform properties cannot really be individually animated, unless you happen to be good with transformation matrixes and are ready to write a lot of supporting code for a better animation system. Not only would you have to deal with converting the transform properties into transforms matrices, but you'd also need some sort of system to dynamically mix different matrix states to be actually able to decouple timings. This requires a lot of advanced mathematics and development time, which would most likely be better spent elsewhere.
长答案：CSS3 转换属性不能真正单独动画，除非您碰巧擅长转换矩阵并准备为更好的动画系统编写大量支持代码。您不仅需要处理将变换属性转换为变换矩阵的问题，而且您还需要某种系统来动态混合不同的矩阵状态，以便真正能够解耦时序。这需要大量的高等数学和开发时间，而这些时间很可能最好花在其他地方。
EDIT: Further reading: How to read individual transform values in js
编辑：进一步阅读：如何在 js 中读取单个转换值
EDIT2: Depending on what exactly you're trying to do, you might be able to separate the animations by splitting them across several nested divs. Eg. The outermost div handles the scale animation and within it is a div with a rotation animation. CSSdeck example
EDIT2：根据您究竟要做什么，您可以通过将动画拆分到多个嵌套的 div 来分离动画。例如。最外面的 div 处理缩放动画，里面是一个带有旋转动画的 div。CSSdeck 示例
