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

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

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

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

🤔 А знаете ли вы, что...
JavaScript обеспечивает обработку ошибок с использованием конструкции try...catch.


2
4 155
2

Ответы:

Если вы хотите добавить свои изображения с указанной задержкой, вы можете использовать setTimeout следующим образом:

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

Это добавит изображение и будет ждать 500 мс, пока не будет добавлено следующее. Тогда вы по-прежнему будете использовать ту же продолжительность перехода.

Что касается вашей проблемы с анимацией: Перед изменением свойства для анимации ваше изображение должно иметь свойство перехода. Итак, ваш стиль img по умолчанию имеет свойство transition. После того, как вы добавили свой элемент в 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;
}

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


Решено

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

  • используйте 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>