Question

我不能使用Jquery（只是javascript）。我有一个简单的图像数组，可以找到一个随机索引值并将其附加到页面的appendChild（MyRandomImages）（一次共有3张图像）。我需要在其上附加过渡动画缓入0.5s，缓入1s，缓入1.5s。

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（“ animate”）; 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 ....的{{1}}设置为time ms job 是添加您的500课程。

.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);
}

Answer 2

如果要在指定的延迟后添加图像，可以使用setTimeout：

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

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

关于动画问题：在将属性更改为动画之前，图像应具有transition属性。因此，默认情况下，您的img样式具有transition属性。在javascript中添加元素后，您可以为它提供一个类（在您的情况下为height和width的新属性值），其中包含不同的值，例如：

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

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

因此，只需在应用图像后将可见类添加到图像

如何在javascript中添加带有动画的子元素？

2 个答案: