Я не могу использовать 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.
Если вы хотите добавить свои изображения с указанной задержкой, вы можете использовать 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;
}
Так что просто добавьте видимый класс к изображению после того, как вы его применили.
Для последовательного добавления изображений вы можете:
.forEach(element, index)
, который: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>