javascript - JS createElement() 上的 CSS Transition 间歇性工作

Question

我正在使用 JavaScript 创建一个 div，我正在添加 transition: .5s linear top;

onmousedown，div 应该移动到顶部，然后使用 JS remove() 将其删除。有时过渡有效，有时无效。

我怀疑是 JS 中的某些东西导致了它......我错过了什么？

var redBox = document.createElement("div"),
    intSet;

document.onmousedown = function(){
  intSet = setInterval("animate()", 1000);
}

document.onmouseup = function(){
  clearInterval(intSet);
}

function animate(){
  redBox.classList.add("redBox");
  document.body.appendChild(redBox);

  setTimeout (function() {
    redBox.style.top = "0";
  },0);	

  setTimeout (function(){
    redBox.remove(redBox.selectedIndex);
  },500);
}

.redBox{
  background:red;
  height: 100px;
  width: 100px;
  top: 300px;
  position: absolute;
  transition: .5s linear top;
}

Answer 1

我想通了。感谢@Thomas。

var redBox = document.createElement("div"),
    intSet;

document.onmousedown = function(){
  intSet = setInterval("animate()", 1000);
}

document.onmouseup = function(){
  clearInterval(intSet);
}

function animate(){
  redBox.classList.add("redBox");
  document.body.appendChild(redBox);

    redBox.scrollWidth;
    redBox.style.top = "0";


  setTimeout (function(){
    redBox.remove(redBox.selectedIndex);
  },500);
}

.redBox{
  background:red;
  height: 100px;
  width: 100px;
  top: 300px;
  position: absolute;
  transition: .5s linear top;
}

我将 setTimeout(function(){},0); 替换为 redBox.scrollWidth;。 CSS 动画现在运行流畅 ;)