CSS Переход только для одного типа преобразования?

Можно ли оживить (используя переходы) только один тип преобразования css?

У меня есть css:

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

Теперь я хочу только анимировать масштаб. В этом случае я мог бы использовать положение: абсолютные и левые/правые свойства, но, насколько я помню, translate() намного лучше работает. Я также хотел бы избежать использования дополнительных элементов html.

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

Ответы

Ответ 1

Да! Вы разделяете его на два селектора, один из них с 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>

Ответ 2

Нет! вы не можете использовать 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);
}

Ответ 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);
}