How to appendChild with Animation in javascript?

Question

I cant use Jquery (just javascript). I have a simple array of images that I find a random index values and appendChild(MyRandomImages) (3 images all at once) to the page. I need it to be appended with a transition animation ease-in 0.5s, ease-in 1s, ease-in 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);

So result[0].appendChild(img) needs somehow to have preventDefault() and be animated into the scene, I tried invoking css3 animation by adding a new class that animates it. So if class:

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

And I did el.classList.add("animate"); where el is result class:

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

but it didnt work. and I had the logical problem of how applying three classes to each one since I need them to be appended at different times (0.5, 1, 1.5s).

I would very much like to somehow invoke a css3 animation to do this and use no Jquery.

Thanks In advance.

Possible duplicate of [Trigger CSS transition on appended element](https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element) — kashalo, Sep 01 '18 at 15:07

Roko C. Buljan · Accepted Answer · 2018-09-01T16:49:34.530

3

To append images sequentially you can do:

use JS's .forEach(element, index) that:
creates a random image
appends the image to DOM
use setTimeout(()=> {/*job*/}, time * index ) where time*index will result in N timeouts like: 0, 500, 1500 .... having time set to 500ms and the job is to add your .animate class.

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>

edited Sep 01 '18 at 16:49

answered Sep 01 '18 at 16:43

Roko C. Buljan

164,703
32
260
278

Thanks that works just the way I needed. Not to mentioned you removed many repetition by using forEach(). – AliR Sep 01 '18 at 18:54
@AliR :) glad it helped. Happy coding – Roko C. Buljan Sep 01 '18 at 20:35
are the ~~ to ensure it always return a positive index number? isnt the length of array always positive? – AliR Sep 02 '18 at 19:23
See: https://stackoverflow.com/questions/5971645/what-is-the-double-tilde-operator-in-javascript and https://stackoverflow.com/questions/4055633/what-does-double-tilde-do-in-javascript – Roko C. Buljan Sep 03 '18 at 02:34

score 0 · Answer 2 · answered Sep 01 '18 at 15:19

If you want to append your images with a specified delay you could use setTimeout like this:

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

This will append a image and will wait 500ms till the next will be appended. Then you still use the same duration time for your transition.

Regarding your animation issue: Your image should have the transition property before you change the property to be animated. So your img style has the transition property by default. After you appended your element in javascript you give it a class (in your case with the new property values of the height and width) with the different values in it, e.g.:

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

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

So just then add the visible class to the image after you applied it

How to appendChild with Animation in javascript?

2 Answers2