如何在javascript中附加带有动画的Child？

Question

我不能使用 Jquery（只是 javascript）。 我有一个简单的图像数组，我找到一个随机索引值并将Child（MyRandomImages）（一次3个图像）附加到页面。我需要它附加一个过渡动画缓入 0.5 秒、缓入 1 秒、缓入 1.5 秒。

images = ["image/1.png",
          "image/2.png",
          "image/3.png",
          "image/4.png",
          "image/5.png",
          "image/6.png"];

var img = document.createElement("img");
var img1 = document.createElement("img");
var img2 = document.createElement("img");  

var randomVal = Math.floor(Math.random()*images.length);
var randomVal1 = Math.floor(Math.random()*images.length);
var randomVal2 = Math.floor(Math.random()*images.length);

img.src = images[randomVal];
img1.src = images[randomVal1];
img2.src = images[randomVal2];


var result = document.getElementsByClassName("result");
result[0].appendChild(img);
result[1].appendChild(img1);
result[2].appendChild(img2);

因此 result[0].appendChild(img) 需要以某种方式具有 preventDefault() 并在场景中进行动画处理，我尝试通过添加一个为其设置动画的新类来调用 css3 动画。所以如果类：

.result {
width:0;
height:0;}

我做到了 el.classList.add("动画");其中 el 是结果类：

.animate{
-webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
    width: 300px;
    height: 300px;
}

但它没有工作。我有一个逻辑问题是如何将三个类应用于每个类，因为我需要在不同的时间（0.5、1、1.5s）附加它们。

我非常想以某种方式调用 css3 动画来执行此操作并且不使用 Jquery。

提前致谢。

Answer 1

要按顺序附加图像，您可以这样做：

• 使用 JS 的 .forEach(element, index) 表示：
• 创建随机图像
• 将图像附加到 DOM
• 使用setTimeout(()=> {/*job*/}, time * index )，其中time*index 将导致N 次超时，例如：0, 500, 1500 .... 将time 设置为500ms，job 是添加您的 .animate 课程。

const images = [
  "//placehold.it/300x300/0bf",
  "//placehold.it/300x300/f0b",
  "//placehold.it/300x300/bf0",
  "//placehold.it/300x300/0fb",
  "//placehold.it/300x300/b0f",
  "//placehold.it/300x300/fb0",
];

const createImg = (el, i) => {
  const img = document.createElement("img");
  img.src = images[~~(Math.random() * images.length)];
  el.appendChild(img);
  setTimeout(()=> img.classList.add("animate"), i*500);
}


document.querySelectorAll(".result").forEach(createImg);

body {
  display: flex;
}

.result img{
  max-width: 100%;
  transform: scale(0);
  transition: 0.5s;
}

.result img.animate{
  transform: scale(1);
}

<div class="result"></div>
<div class="result"></div>
<div class="result"></div>

Answer 2

如果您想以指定的延迟附加您的图像，您可以像这样使用 setTimeout：

// append
setTimeout(function(){
  // append
  setTimeout(function(){
    // append
  }, 500)
}, 500)

这将附加一个图像，并等待 500 毫秒，直到下一个被附加。然后，您仍然使用相同的持续时间进行过渡。

关于您的动画问题： 在将属性更改为动画之前，您的图像应该具有过渡属性。 因此，您的 img 样式默认具有过渡属性。在 javascript 中附加元素后，你给它一个类（在你的情况下，具有高度和宽度的新属性值），其中包含不同的值，例如：

.result{
  // with "all" you apply a transition to all css properties
  transition: all 0.5s;
  width: 0;
  height: 0;
}

.visible{
  width: 300px;
  height: 300px;
}

所以在你应用它之后将可见类添加到图像中