在 Javascript 中添加转换速度答案

【问题标题】：Add transform speed in Javascript在 Javascript 中添加转换速度
【发布时间】：2019-07-09 14:29:58
【问题描述】：

我想在使用 Javascript 进行的转换中增加一些速度，但我不完全知道如何..

我的 Javascript 代码是

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

我的这个类在我的 html 代码中。我应该如何增加一些速度？

我试过了

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

但它并不完全有效..

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案2】：

你的代码有3个问题：

这将起作用：

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

【讨论】：

谢谢！我只想问，如果我把像素翻译，这也会响应式地工作吗？（当我将它转换为另一个屏幕尺寸时，它会转换相同的数量吗？）
这是一个完全不同的问题，没有简短的答案。您可能需要仔细阅读developer.mozilla.org/en-US/docs/Web/CSS/length 以选择适合您规格的长度单位。对于响应行为，我通常使用rem 并针对不同的屏幕尺寸调整html 元素上的字体大小。