Javascript style.transform = scale(x,y) 动画不起作用

Question

我试图使用该style.transform属性制作动画。目的是循环变换比例属性，并在每轮中稍微增加 x 和 y，但它失败了。我怎样才能达到这个效果？

x = document.getElementById("btn");
x.onclick = function() {
  for (let y = 0; y < 1; y += 0.1) {
    x.style.transform = 'scale(1.' + y + ',' + '1.' + y + ')';
  }
}

<button id='btn'>button</button>

Answer 1

您应该使用 CSS 过渡。像这样设计你的按钮：

#btn {
  transition: transform 0.1s
}

每当变换属性（例如比例）发生更改时，该代码都会使按钮在 0.1 秒内进行转换。

然后，在 JavaScript 代码中，您只需指定一次转换样式，CSS 就会自动转换。

x = document.getElementById("btn");

x.onclick = function() {
  x.style.transform = 'scale(2,2)'; // or any x and y value
}

x = document.getElementById("btn");

x.onclick = function() {
  x.style.transform = 'scale(2,2)'; // or any x and y value
}

x = document.getElementById("btn");

x.onclick = function() {
  x.style.transform = 'scale(2,2)'; // or any x and y value
}

#btn {
  transition: transform 0.1s
}