CSS Transition for only one type of transform?

问题:

Is it possible to animate (using transitions) only one type of css transform?

I have css:

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

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.

Fiddle: http://jsfiddle.net/6UE28/2/

回答1:

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>

回答2:

No! you cannot use transition only for certain value of transform like scale(2).

One possible solution would be as follows: (sorry, you have to use additional 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);
}

回答3:

Yes, why not. In order to do that, you have to actually use only one transform.

This is what is confusing you: you don't apply transform on the element itself. You apply that to the change-state (by means of a pseudo class like :hover or another class using styles that you want in the changed state). Please see @David's comment on your question. You change state for only that property which you want to change and that will animate.

So, effectively you change them selectively based on changed-state.

Solution 1: Using Javascript (based on the fiddle you provided in your question)

Demo: http://jsfiddle.net/abhitalks/6UE28/4/

Relevant CSS:

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

Relevant 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)"
    });
});

Solution 2: Using CSS Only

Demo 2: http://jsfiddle.net/abhitalks/4pPSw/1/

Relevant 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);
}

回答4:

Instead of forcing a reflow, you can instead use setTimeout.

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>