CSS Transition仅适用于一种类型的转换？

Question

是否可以仅为一种css变换设置动画(使用过渡)？

我有css:

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

现在,我只希望缩放比例为动画.在这种情况下,我可以使用position:absolute和left/right属性,但据我记得,translate()在性能方面要好得多.我还想避免使用额外的html元素.

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

Answer 1

没有!你不能使用transition对某些价值只有transform像scale(2).

一种可能的解决方案如下:( 对不起,你必须使用额外的HTML)

HTML

<div class="scale">
<div class="translate">
Hello World
</div>
</div>

CSS

div.scale:hover {
    transform: scale(2);
    transition: transform 0.25s;
}
div.scale:hover div.translate {
    transform: translate(100px,200px);
}

Answer 2

是! 您将它分成两个选择器,其中一个选择器,transition: none然后在其间触发CSS reflow以应用更改(否则它将被视为一个更改并将转换).

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>

Answer 3

是的！现在您可以了，因为translate、scale和rotate已移至单独的 css 属性！（MDN：平移、缩放、旋转）

所以现在你可以这样做：

div{
   scale: 1;
   translate: 0;

   transition: scale 0.4s;
}

div.clicked{
   scale: 2;
   translate: 100px 200px; 
}

示例： http: //jsfiddle.net/bjkdthr5/1/（仅scale动画）