Javascript动画多次运行时闪烁

Question

这是我第一次尝试使用 JS 动画。我刚刚修改了一个简单的教程来创建一个在单击元素时淡出的边框。第一次它工作得很好，但随后的每次点击它都会闪烁并且表现得很奇怪。我无法弄清楚问题出在哪里。

function move(elem) {
  var left = 1
  function frame() {
    left = left - 0.1  // update parameters
    elem.style.border = '6px solid rgba(48, 28, 237, '+left+')';
    if (left == 0)  // check finish condition
      clearInterval(id)
  }
  var id = setInterval(frame, 100) // draw every 10ms
}

HTML:

<div onclick="move(this)" class="example_path"></div>

Codepen - http://codepen.io/anon/pen/jqrwoo

Answer 1

javascript计数 float 不准确，例如:控制台.log(0.1+0.2);不是 0.3，是 0.30000000000000004，所以...“left = left - 0.1”永远不等于“0”应该“如果(左== 0)”修改“如果(左 <= 0)”很抱歉我的英语不好，表达不清。