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以应用更改（否则它将被视为一个更改并将转换）。

＆＃13;

var el = document.getElementById('el');
el.addEventListener('click', function() {
  el.classList.add('enlarged');
  el.offsetHeight; /* CSS reflow */
  el.classList.add('moved');
});

＆＃13;

#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; }

＆＃13;

<div id="el"></div>

＆＃13;

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

而不是强制使用reflow，而是使用setTimeout。

＆＃13;

var el = document.getElementById('el');
el.addEventListener('click', function() {
  el.classList.add('enlarged');
  setTimeout(function() {el.classList.add('moved');})
});

＆＃13;

#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; }

＆＃13;

<div id="el"></div>

＆＃13;

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

4 个答案:

HTML

CSS