如何在JavaScript中使用动画添加子元素？

Question

如何在JavaScript中使用动画添加子元素？

3

我不能使用Jquery（只能使用JavaScript）。我有一个简单的图像数组，我会找到一个随机索引值，并appendChild（MyRandomImages）（一次3张图片）添加到页面中。我需要它附加一个过渡动画ease-in 0.5秒，ease-in 1秒，ease-in 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)需要一些方式来防止默认事件，并将其动画化到场景中，我尝试通过添加一个新的类使其调用css3动画进行动画化。因此，如果类：

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

我使用了 el.classList.add("animate"); 这段代码，其中 el 是指代 result 类的一个元素。

.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.5秒）追加。

我非常希望能够调用CSS3动画来完成这个操作，而不使用JQuery。

提前感谢您的帮助。

- AliR

1

可能是 Trigger CSS transition on appended element 的重复问题。 - kashalo

2个回答

0

如果你想要为你的图像附加指定延迟，你可以像这样使用 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;
}

所以在应用后，只需将可见类添加到图像即可

- Walamana

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

要按顺序追加图片，您可以这样做：

使用JS的.forEach(element, index)，它会：
创建一个随机图片
将图片附加到DOM中
使用setTimeout(()=> {/*job*/}, time * index )，其中time*index将产生N个超时，如：0, 500, 1500 ....，其中time设置为500毫秒，而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>