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>