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屋！