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动画现在运行顺利;）

JS createElement（）上的CSS转换间歇工作

1 个答案: