Как сделать, чтобы скрипт №2 начинал работу вслед за скриптом №1?
Имеется два скрипта, один рандомно показывает блоки, а второй
скрывает через N секунд содержимое блока №1. Но как сделать, чтобы код скрывал содержимое еще и блока №3? а также отчитывал время до скрытия содержимого этих блоков не с момента загрузки страницы, а с момента показа данных блоков?
document.addEventListener( "DOMContentLoaded" , function() {
class RandomFadeIn {
constructor(cls, delay=1350, pause=300){
this.parent = document.querySelector(cls);
this.items = this.parent.children;
delay = Array.from({length : this.items.length}, (v,k) => delay * k);
Array.from(this.items).forEach((el,i) => {
i = delay.length * Math.random()|0;
i = delay.splice(i, 1)[0];
el.style.setProperty("--delay", `${i}ms`)
});
window.setTimeout(()=> this.parent.classList.add("show"), pause);
}
}
new RandomFadeIn(".box-container")
});
setTimeout(function(){
document.getElementById('message').style.display = 'none';
}, 5000);
<div class="box-container"> <div class="block"><div class="num">1</div><div class="items">один<p id="message">текст №1 скроется через 5 сек.</p></div></div> <div class="block"><div class="num">2</div><div class="items">два</div></div> <div class="block"><div class="num">3</div><div class="items">три<p id="message">текст №2 скроется через 5 сек.</p></div></div> <div class="block"><div class="num">4</div><div class="items">четыре</div></div> </div>
.box-container {
width: 232px;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}
.box-container div {
height: 50px;
width: 50px;
text-align: center;
background-color: hsla(0, 0%, 75%, 1);
line-height: 50px;
position: relative;
}
.box-container div .items{
margin: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: hsla(167, 100%, 30%, 1);
display: block;
opacity: 0;
z-index: -1;
transition: 1s var(--delay);
}
.box-container.show div .items{
opacity: 1;
z-index: 1;
}
|
Lefseq,
Событие transitionend |
рони,
а как это событие можно применить в данном коде? |
Цитата:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box-container {
width: 232px;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}
.box-container div {
height: 50px;
width: 50px;
text-align: center;
background-color: hsla(0, 0%, 75%, 1);
line-height: 50px;
position: relative;
}
.box-container div .items{
margin: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: hsla(167, 100%, 30%, 1);
display: block;
opacity: 0;
z-index: -1;
transition: 1s var(--delay);
}
.box-container.show div .items{
opacity: 1;
z-index: 1;
}
.box-container.show div .items .message{
transition: 1s calc(var(--delay) + 6s);
opacity: 0;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
class RandomFadeIn {
constructor(cls, delay=1350, pause=300){
this.parent = document.querySelector(cls);
this.items = this.parent.children;
delay = Array.from({length : this.items.length}, (v,k) => delay * k);
Array.from(this.items).forEach((el,i) => {
i = delay.length * Math.random()|0;
i = delay.splice(i, 1)[0];
el.style.setProperty("--delay", `${i}ms`);
});
window.setTimeout(()=> this.parent.classList.add("show"), pause);
}
}
new RandomFadeIn(".box-container")
});
</script>
</head>
<body>
<div class="box-container">
<div class="block"><div class="num">1</div><div class="items">один<p class="message">текст №1 скроется через 5 сек.</p></div></div>
<div class="block"><div class="num">2</div><div class="items">два</div></div>
<div class="block"><div class="num">3</div><div class="items">три<p class="message">текст №2 скроется через 5 сек.</p></div></div>
<div class="block"><div class="num">4</div><div class="items">четыре</div></div>
</div>
</body>
</html>
|
рони,
Все работает. Спасибо. |
| Часовой пояс GMT +3, время: 03:14. |