CSS转换只有一种类型的转换? [英] CSS Transition for only one type of transform?
问题描述
是否可以使用转换来动画化一种类型的CSS变换?
Is it possible to animate (using transitions) only one type of css transform?
我有css:
cell{
transform: scale(2) translate(100px, 200px);
transition: All 0.25s;
}
现在,我只想缩放动画。
在这种情况下,我可以使用position:absolute和left / right属性,但就我所知,translate()在性能上更好。
我也想避免使用额外的html元素。
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.
小提琴: http://jsfiddle.net/6UE28/2/
推荐答案
是的!你将它分成两个选择器,其中一个与 transition:none
,然后触发CSS回流之间,以应用更改(否则将被视为一个更改,并将转换)。
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).
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>
这篇关于CSS转换只有一种类型的转换?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!