css3 – CSS转换只有一种类型的转换?

前端之家收集整理的这篇文章主要介绍了css3 – CSS转换只有一种类型的转换?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以动画(使用转换)只有一种类型的CSS变换?

我有css:

  1. cell{
  2. transform: scale(2) translate(100px,200px);
  3. transition: All 0.25s;
  4. }

现在,我只想把尺度做成动画。
在这种情况下,我可以使用position:absolute和left / right属性,但是我还记得,translate()的性能要好得多。
我也想避免使用额外的html元素。

小提琴:http://jsfiddle.net/6UE28/2/

解决方法

是!您将它分成两个选择器,其中一个转换:无,然后触发CSS回流以应用更改(否则将被视为一个更改并将转换)。
  1. var el = document.getElementById('el');
  2. el.addEventListener('click',function() {
  3. el.classList.add('enlarged');
  4. el.offsetHeight; /* CSS reflow */
  5. el.classList.add('moved');
  6. });
  1. #el { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
  2. #el.enlarged { transform: scale(2); transition: none; }
  3. #el.moved { transform: scale(2) translate(100px); transition: transform 3s; }
  1. <div id="el"></div>

猜你在找的CSS相关文章