Javascript 动画问题 - 过渡不工作

Question

我正在尝试仅使用 JavaScript(无 CSS)为页面上的 SVG 制作动画。但是，转换没有应用延迟

dot.style.transition = "all 0.4s ease";
dot.style.transform = "translateY(-5px)";

这导致它的 translateY 被应用，但没有被转换。为什么会这样，我该如何避免？

https://jsfiddle.net/0nmha9uf/Svg 似乎完全被窃听了。

编辑:修复了 0.4 秒的拼写错误 - 这不是问题所在。

编辑 3:解决，利用 requestAnimationFrame https://jsfiddle.net/ke5fnp9h/3/

Answer 1

您的 0.4 上缺少单位。应该是 0.4s。

这是一个工作示例。点击圆点:

var dot = document.getElementById('dot');

dot.addEventListener('click', function() {
  dot.style.transition = "all 0.4s ease";
  dot.style.transform = "translateY(-5px)";
});

#dot {
  background: #000;
  border-radius: 50%;
  height: 1em;
  width: 1em;
}

<div id="dot"></div>