CSS Transition 仅用于一种类型的转换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24120132/
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
CSS Transition for only one type of transform?
提问by cimak
Is it possible to animate (using transitions) only one type of css transform?
是否可以仅对一种类型的 css 转换进行动画处理（使用过渡）？
I have css:
我有CSS：
cell{
transform: scale(2) translate(100px, 200px);
transition: All 0.25s;
}
Now, I want only scale to be animated. In this case I could use position:absolute and left/right properties but I far as I remember, translate() is much better in performance. I would also like to avoid using additional html elements.
现在，我只想对比例进行动画处理。在这种情况下，我可以使用 position:absolute 和 left/right 属性，但据我所知， translate() 的性能要好得多。我还想避免使用额外的 html 元素。
Fiddle: http://jsfiddle.net/6UE28/2/
采纳答案by user
Yes! You separate it into two selectors, one of them with transition: none, then trigger CSS reflow in between to apply the change (otherwise it will be considered as one change and will transition).
是的！您将其分成两个选择器，其中一个使用transition: none，然后在两者之间触发 CSS 重排以应用更改（否则它将被视为一个更改并进行转换）。
var el = document.getElementById('el');
el.addEventListener('click', function() {
el.classList.add('enlarged');
el.offsetHeight; /* CSS reflow */
el.classList.add('moved');
});#el { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#el.enlarged { transform: scale(2); transition: none; }
#el.moved { transform: scale(2) translate(100px); transition: transform 3s; }<div id="el"></div>回答by Barun
No!you cannot use transitiononly for certain value of transformlike scale(2).
不！您不能transition仅用于transformlike 的某些值scale(2)。
One possible solution would be as follows: (sorry, you have to use additional html)
一种可能的解决方案如下：（抱歉，您必须使用额外的 html）
HTML
HTML
<div class="scale">
<div class="translate">
Hello World
</div>
</div>
CSS
CSS
div.scale:hover {
transform: scale(2);
transition: transform 0.25s;
}
div.scale:hover div.translate {
transform: translate(100px,200px);
}
回答by Abhitalks
Yes, why not. In order to do that, you have to actuallyuse only one transform.
是的，为什么不。为了做到这一点，您实际上只需要使用一个变换。
This is what is confusing you: you don't apply transform on the element itself. You apply that to the change-state (by means of a pseudo class like :hoveror another class using styles that you want in the changed state). Please see @David's comment on your question. You change state for only that property which you want to change and that will animate.
这就是让您感到困惑的地方：您没有对元素本身应用变换。您将其应用于更改状态（通过类似伪类:hover或使用更改状态中所需样式的其他类）。请参阅@David 对您的问题的评论。您只更改要更改的属性的状态，该属性将设置动画。
So, effectively you change them selectively based on changed-state.
因此，您可以有效地根据更改的状态有选择地更改它们。
Solution 1: Using Javascript (based on the fiddle you provided in your question)
解决方案 1：使用 Javascript（基于您在问题中提供的小提琴）
Demo: http://jsfiddle.net/abhitalks/6UE28/4/
演示：http: //jsfiddle.net/abhitalks/6UE28/4/
Relevant CSS:
相关CSS：
div{
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
/* do NOT specify transforms here */
}
Relevant jQuery:
相关的jQuery：
$('...').click(function(){
$("#trgt").css({
"-webkit-transform": "scale(0.5)"
});
});
// OR
$('...').click(function(){
$("#trgt").css({
"-webkit-transform": "translate(100px, 100px)"
});
});
// OR
$('...').click(function(){
$("#trgt").css({
"-webkit-transform": "scale(0.5) translate(100px, 100px)"
});
});
Solution 2: Using CSS Only
解决方案 2：仅使用 CSS
Demo 2: http://jsfiddle.net/abhitalks/4pPSw/1/
演示 2：http: //jsfiddle.net/abhitalks/4pPSw/1/
Relevant CSS:
相关CSS：
div{
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
/* do NOT specify transforms here */
}
div:hover {
-webkit-transform: scale(0.5);
}
/* OR */
div:hover {
-webkit-transform: translate(100px, 100px);
}
/* OR */
div:hover {
-webkit-transform: scale(0.5) translate(100px, 100px);
}
回答by Raphael Rafatpanah
Instead of forcing a reflow, you can instead use setTimeout.
相反，强迫的回流，您可以改用setTimeout。
var el = document.getElementById('el');
el.addEventListener('click', function() {
el.classList.add('enlarged');
setTimeout(function() {el.classList.add('moved');})
});#el { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#el.enlarged { transform: scale(2); transition: none; }
#el.moved { transform: scale(2) translate(100px); transition: transform 3s; }<div id="el"></div>