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

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

您可以使用setTimeout，而不是强制使用reflow。

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>

Answer 2

是的！您将它分成两个选择器，其中一个带有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>

Answer 3

是的，为什么不呢。为此，您必须实际上只使用一种转换。

这让你感到困惑：你没有对元素本身应用变换。您将其应用于更改状态（通过 :hover 之类的伪类或使用您希望处于更改状态的样式的另一个类）。请参阅@David 对您的问题的评论。您只更改您想要更改的属性的状态，并且该属性会生成动画。

因此，您可以有效地根据更改的状态选择性地更改它们。

解决方案 1：使用 Javascript（基于您在问题中提供的小提琴）

演示：http://jsfiddle.net/abhitalks/6UE28/4/

相关 CSS：

div{   
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    /* do NOT specify transforms here */
}

相关的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)"
    });
});

解决方案 2：仅使用 CSS

演示 2：http://jsfiddle.net/abhitalks/4pPSw/1/

相关 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);
}

Answer 4

不！您不能仅将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);
}