opóźnienie kodu

Question

Witam mam problem i pewnie jest on prosty do rozwiązania, ale nie mogę sobie z nim poradzić mam tutaj 2 linki kodu:

const content = document.querySelector(".tekst");
content.classList.add('active');

jak sprawić żeby drugą część czyli dodanie klasy "active" wykonała się po np. 10 sekundach?

Z góry dziękuje za odpowiedź!

Answer 1

Witaj,

Wydaje mi się, że rozwiązaniem twojego problemu może być skorzystanie z metody setTimeout, o której możesz poczytać tu

 

Edit: Jeżeli klasa active powiązana jest z transition lub z animacjami, to możesz w css'ie ustawić delay na interesujący cie okres czasu - transition, animation delay

Answer 2

Z użyciem funkcji strzałkowej, sprawa jest banalnie prosta (chodzi o zapis).

Jak już wspomniał @Michał Bysiewicz, setTimeout(...), np.:

const content = document.querySelector(".tekst");
setTimeout(() => { content.classList.add('active') }, 5000); // w ms, 1000 = 1sekunda

 

<div class="box-wrap">
  <div class="circle green"></div>
  <div class="circle red"></div>
</div>

* {
  box-sizing: border-box;
}
.box-wrap {
  display: flex;
  justify-items: center;
  width: 130px;
  height: 65px;
  margin: 1em;
  background-color: silver;
  border-radius: 2em;
}
.box-wrap .circle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: 0.5em;
  transition: all 0.9s;
}
.green {
  background-color: green;
  background-image: radial-gradient(silver, green);
  box-shadow: 0 0 2px 4px limegreen;
}
.red {
  background-color: red;
  background-image: radial-gradient(silver, red);
  box-shadow: 0 0 2px 4px lightcoral;
}

const circle_light = document.querySelectorAll('.circle');

setTimeout(() => {
  setInterval(() => {
    circle_light.forEach(item => {
      item.classList.toggle('green');
      item.classList.toggle('red');
    })
  }, 1000)
}, 2000)

 

Comments

Dziękuje za odpowiedź, lecz chciałem zrobić jeszcze jedną rzecz do tego kodu a mianowicie odjeżdżanie tych elementów i czemu zdjęcia odjeżdżają a tytuł z nimi nie?
Kod:https://codepen.io/AgentTecza/pen/xxgqywN
chciałbym żeby odjeżdżało wszystko na raz lecz nie wiem jak to wykonać. Mógłbyś mi jakoś pomóc?

---

U Mnie na chromie działa, "odjeżdża" cała zawartość diva (slider-wrap)

 

Tak na marginesie, to:

setTimeout(() => {content.classList.add('active') },1000);
setTimeout(() => {content.classList.add('active1') },1000);

na

setTimeout(() => {
  content.classList.add('active'); 
  content.classList.add('active1');
}, 1000);

 

 

BTW fajny efekt jest przez dodanie: opacity.   

@keyframes odjazd {
    100% {
        transform: translateX(-2000px);
        opacity: 0;
    }
}

 

---

Tak slider-wrap odjeżdża tylko ja bym chciał żeby jeszcze odjeżdżał napis razem z tym czyli "ELOOOO" tylko nie wiem dlaczego nie działa.

---

bo odwołujesz się 2 razy do content

const content = document.querySelector(".slider-wrap");
const title = document.querySelector(".slider-title");
setTimeout(() => {
  content.classList.add('active'); 
  content.classList.add('active1');
}, 1000);

a powinno być: content i title  (i wystarczy przypisanie class-y active do obydwu)

const content = document.querySelector(".slider-wrap");
const title = document.querySelector(".slider-title");
setTimeout(() => {
  content.classList.add('active'); 
  title.classList.add('active');
}, 1000);