Как добавить ребенка с анимацией в JavaScript?

Question

Я не могу использовать Jquery (только JavaScript). У меня есть простой массив изображений, которые я нахожу случайные значения индекса и appendChild (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);

Таким образом, результат [0] .appendChild (img) должен как-то иметь функцию protectDefault () и анимироваться на сцене, я попытался вызвать анимацию 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,5 с).

Я бы очень хотел как-то вызвать анимацию css3, чтобы сделать это и не использовать Jquery.

Заранее спасибо.

Answer 1

Чтобы добавить изображения последовательно, вы можете сделать:

• используйте JS .forEach(element, index), которые:
• создает случайное изображение
• добавляет изображение в DOM
• использовать setTimeout(()=> {/*job*/}, time * index ), где time*index приведет к N тайм-аутам, например: 0, 500, 1500 .... с time, установленным на 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);
}

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

Так что просто добавьте видимый класс к изображению после того, как вы применили его