Добавить скорость преобразования в Javascript

Question

Я хотел бы добавить некоторую скорость в преобразование, которое я сделал с помощью Javascript, но я точно не знаю, как ..

Мой код Javascript

$('#cell1').mouseenter(function(){
    $(this).attr('transform', 'scale(1 1) translate(200, 10)');

И мойэтот класс находится внутри моего HTML-кода.Как мне добавить немного скорости?

Я пробовал это

$(this).attr('transition-duration', '3s');

, но это не совсем работает ..

Answer 1

Используйте .css() вместо .attr().

Кроме того, вам необходимо убедиться, что вы правильно используете функции css.Например, вам нужно убедиться, что translate использует px для координат и что scale разделено запятой (если h & w одинаковы, вы можете просто указать 1 единицу).

См. Работупример ниже:

$('#cell1').mouseenter(function() {
  $(this).css({
     "transition-duration": "3s", 
     "transform": "scale(1) translate(200px, 10px)"
  });
});

#cell1 {
  height: 150px;
  width: 150px;
  border: 1px solid red;
  transform: scale(0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cell1"></div>

Answer 2

В вашем коде есть 3 проблемы:

1. используйте $.css() вместо $.attr()
2. отдельное значение CSS scale с запятой
3. добавить единицы для перевода

Это будет работать:

$(this).css('transform', 'scale(1, 1) translate(200px, 10px)');
$(this).css('transition-duration', '3s');

https://jsfiddle.net/781wuxym/