Question

我正在研究一个世纪的脚本，它在设定的时间间隔内创建和删除元素，但我需要先删除元素，然后再删除它们。我希望以编程方式和仅使用JavaScript来完成此效果。

我试图像这样添加淡出动画：

function createRandomDiv () {
  ...
  randomDiv.style.opacity = "1";
  randomDiv.style.transition = "opacity 0.1s ease-out";
  ...
}

然后听动画片＆＃39;删除它的事件，但它并没有被淡出。

function deleteRandomDiv () {
  ...
  div.style.opacity = "0";
  div.addEventListener('animationend', function () {
    this.remove();
  });
  ...
}

以下是我目前所拥有的内容：https://jsbin.com/nuqeyutopu/edit？

我有什么：

＆＃13;

console.clear();
document.body.style.position = "fixed";
document.body.style.height = "100%";
document.body.style.width = "100%";
document.body.style.backgroundColor = "#EFEFEF";

var numDivs = 20;
var maxSize = 400;

function createRandomDiv() {
    var randomDiv = document.createElement("div");
    var size = Math.floor(Math.random() * maxSize) + "px";
    randomDiv.style.height = size;
    randomDiv.style.width = size;
    randomDiv.style.backgroundColor = getRandomColor();
    randomDiv.style.position = "absolute";
    randomDiv.style.top = getRandomPosition();
    randomDiv.style.left = getRandomPosition();
    randomDiv.style.display = "block";
    randomDiv.style.borderRadius = "500px";
    randomDiv.innerHTML = "&nbsp";
    randomDiv.style.backgroundImage = "url(http://vignette2.wikia.nocookie.net/filthy-frank/images/8/8d/516c32f08e03d.png/revision/latest?cb=20151019010624)";
    randomDiv.style.backgroundSize="contain";
    document.body.appendChild(randomDiv);
}

function createDivs() {
  for(var i = 0; i < numDivs; i++) {
    createRandomDiv();
  }
}

function getRandomPosition() {
  return Math.floor(Math.random() * 100) + "%";
}

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function deleteRandomDiv() {
  var divs = document.querySelectorAll('div');
  divs[Math.floor(Math.random() * divs.length)].remove();
}

createDivs();

setInterval(function () {
  createRandomDiv();
  deleteRandomDiv();
}, 50);

＆＃13;

Answer 1

你非常接近。您需要做的就是使转换长度更长一些

 randomDiv.style.transition = "opacity 2s ease-out";

然后将删除延迟相同的数量：

function deleteRandomDiv() {
  var divs = document.querySelectorAll('div');
  divs[Math.floor(Math.random() * divs.length)].style.opacity = "0";
  setTimeout(function() {divs[Math.floor(Math.random() * divs.length)].remove()},2000);
}

JSfiddle

Answer 2

这有效：

function deleteRandomDiv() {
  var divs = document.querySelectorAll('div');
  var divToRemove = divs[Math.floor(Math.random() * divs.length)];
  divToRemove.style.opacity = 1;
  fadeOut(divToRemove);
}

function fadeOut(el) {
    el.style.opacity = el.style.opacity - .1;
    if(el.style.opacity > 0){
    setTimeout(function(){fadeOut(el)}, 10);
  }
  else{
    el.remove();
  }
}

Answer 3

修正了您的deleteRandomDiv功能，添加了getRandomInt功能：

console.clear();
document.body.style.position = "fixed";
document.body.style.height = "100%";
document.body.style.width = "100%";
document.body.style.backgroundColor = "#EFEFEF";

var numDivs = 20;
var maxSize = 400;

function createRandomDiv() {
    var randomDiv = document.createElement("div");
    var size = Math.floor(Math.random() * maxSize) + "px";
    randomDiv.style.height = size;
    randomDiv.style.width = size;
    randomDiv.style.backgroundColor = getRandomColor();
    randomDiv.style.position = "absolute";
    randomDiv.style.top = getRandomPosition();
    randomDiv.style.left = getRandomPosition();
    randomDiv.style.display = "block";
    randomDiv.style.borderRadius = "500px";
    randomDiv.style.opacity = "1";
    randomDiv.style.transition = "opacity 0.3s ease-out";
    randomDiv.innerHTML = "&nbsp";
    randomDiv.style.backgroundImage = "url(http://vignette2.wikia.nocookie.net/filthy-frank/images/8/8d/516c32f08e03d.png/revision/latest?cb=20151019010624)";
    randomDiv.style.backgroundSize="contain";
    document.body.appendChild(randomDiv);
}

function createDivs() {
  for(var i = 0; i < numDivs; i++) {
    createRandomDiv();
  }
}

function getRandomPosition() {
  return Math.floor(Math.random() * 100) + "%";
}

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

function deleteRandomDiv() {
  var divs = document.getElementsByTagName('div');
  var div = divs[getRandomInt(0, divs.length-1)];
  div.style.opacity = "0";
  div.addEventListener('animationend', function () {
    this.remove();
  });
}

createDivs();

setInterval(function () {
  createRandomDiv();
  deleteRandomDiv();
}, 1000);

以编程方式淡化JavaScript中的元素

3 个答案: