1

Tenho este código e gostaria de quem quando o usuário passasse o mouse por cima pausasse o setTimeout e fosse retomado ao tirar o mouse de cima.

function slide(){
  let slides = document.querySelectorAll('.rotate');
  slide2 = slides[0];
  slide3 = slides[1];
  slide4 = slides[2];
  slide2.classList.add('slide2');
  slide3.classList.add('slide2');
  slide4.classList.add('slide2');
  setTimeout(function(){
    slide3.classList.add('slide3');
    slide4.classList.add('slide3');
    setTimeout(function(){
      slide4.classList.add('slide4');
    }, 5000);
  }, 5000);
};
div.rotate {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid #000;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
  transition: 5s linear;
  background-color: transparent;
}
.slide2 {
  transform: rotate(45deg)!important;
}
.slide3 {
  transform: rotate(135deg)!important;
}
.slide4 {
  transform: rotate(225deg)!important;
}
#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#anima {
  color: #fff;
  background-color: #171517;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  position: absolute;
  margin: auto;
  top: 300px;
}
.container_anima {
  margin-top: 30px;
  position: relative;
  width: 205px;
  height: 205px;
/*   border: 2px solid #000; */
  border-radius: 50%;
}
.container_anima_interno {
  position: relative;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  border: 2px solid #cecece;
  border-radius: 50%;
  top: 0px;
  left: 0px;
}
.slides {
  position: absolute;
  color: #000;
  background-color: #fff;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  border: 1px solid #000;
  border-radius: 50%;
}
.slides:first-of-type {
  margin: auto;
  left: 0;
  right: 0;
  top: -15px;
}
.slides:nth-of-type(2) {
  margin: auto;
  top: 0;
  bottom: 0;
  right: -15px;
}
.slides:nth-of-type(3) {
  margin: auto;
  left: 0;
  right: 0;
  bottom: -15px;
}
.slides:last-of-type {
  margin: auto;
  top: 0;
  bottom: 0;
  left: -15px;
}
<div id="container">
  <div class="container_anima">
    <div class="container_anima_interno"></div>
    <div class="rotate" data-slide='1'></div>
    <div class="rotate" data-slide='2'></div>
    <div class="rotate" data-slide='3'></div>
    <div class="rotate" data-slide='4'></div>
    <span class="slides">1</span>
    <span class="slides">2</span>
    <span class="slides">3</span>
    <span class="slides">4</span>
  </div>
  <button id="anima" onclick="slide()">animar</button>
</div>

1
  • 3
    Não tem como pausar o setTimeout. Ou vc cancela ou recomeça.
    – Sam
    Commented 18/07/2019 às 0:26

1 Resposta 1

2

Como já foi dito, não existe a possibilidade pausar um setTimeout ou até mesmo um setInterval. Mas você pode alterar do seu código para "dar essa ideia". No seu caso é um pouco mais trabalhoso pois tem de construir a animação com base em Javascript, e controlar se a cada passo deve animar ou não.

let animacaoCorrendo = false; //variavel para controlar se a animação esta a correr ou parada

function animar(){
  let slides = [...document.querySelectorAll('.rotate')];
  slides.pop(); //retirar o slide 4 que é fixo

  animacaoCorrendo = true;
  let rotacao = -45;
  
  let animacao = setInterval(function(){    
    //se a animação esta correndo altera as varias rotações, caso contrário nao faz nada
    if (animacaoCorrendo){ 
      for (let slide of slides){ //animar cada slide
        slide.style.transform = `rotate(${rotacao}deg)`;
      }
      rotacao++; //aumentar a rotação
      
      //descartar os slides que já animaram até ao seu ponto final
      if (rotacao == 45 || rotacao == 135 || rotacao == 225){
        slides.shift();
      }
      if (rotacao >= 315){ //ponto final de toda a animação
        clearInterval(animacao); //desligar a animação permanentemente
      }
    }
  }, 33);
};

const container = document.querySelector(".container_anima");
container.addEventListener("mouseenter", function(){
  animacaoCorrendo = false;
});

container.addEventListener("mouseleave", function(){
  animacaoCorrendo = true;
});
div.rotate {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid #000;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
  /*transition: 5s linear;*/
  background-color: transparent;
}
.slide2 {
  transform: rotate(45deg)!important;
}
.slide3 {
  transform: rotate(135deg)!important;
}
.slide4 {
  transform: rotate(225deg)!important;
}
#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#anima {
  color: #fff;
  background-color: #171517;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  position: absolute;
  margin: auto;
  top: 300px;
}
.container_anima {
  margin-top: 30px;
  position: relative;
  width: 205px;
  height: 205px;
/*   border: 2px solid #000; */
  border-radius: 50%;
}
.container_anima_interno {
  position: relative;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  border: 2px solid #cecece;
  border-radius: 50%;
  top: 0px;
  left: 0px;
}
.slides {
  position: absolute;
  color: #000;
  background-color: #fff;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  border: 1px solid #000;
  border-radius: 50%;
}
.slides:first-of-type {
  margin: auto;
  left: 0;
  right: 0;
  top: -15px;
}
.slides:nth-of-type(2) {
  margin: auto;
  top: 0;
  bottom: 0;
  right: -15px;
}
.slides:nth-of-type(3) {
  margin: auto;
  left: 0;
  right: 0;
  bottom: -15px;
}
.slides:last-of-type {
  margin: auto;
  top: 0;
  bottom: 0;
  left: -15px;
}
<div id="container">
  <div class="container_anima">
    <div class="container_anima_interno"></div>
    
    <div class="rotate" data-slide='1'></div>
    <div class="rotate" data-slide='2'></div>
    <div class="rotate" data-slide='3'></div>
    <div class="rotate" data-slide='4'></div>
    <span class="slides">1</span>
    <span class="slides">2</span>
    <span class="slides">3</span>
    <span class="slides">4</span>
  </div>
  <button id="anima" onclick="animar()">animar</button>
</div>

Com esta transformação fica mais complicado de gerir as animações pois são feitas pelo Javascript. Isto aplica-se até mesmo aos tempos, que agora são geridos com base no tempo de cada "frame" da animação (que eu defini como 33) e no quanto a rotação aumenta em cada frame (no caso coloquei 1).

Note que tive que adicionalmente desfazer o transition: 5s linear; que estava no div.rotate pois os tempos são todos controlados pelo Javascript.

2
  • 1
    A mudança de slide é 5000ms,mas o código ficou ótimo. Commented 18/07/2019 às 13:03
  • Cara, você foi ótimo! Me ajudou demais, estou começando no javascript, não manjo muito! Mas vejo que você sim!! Muito obrigado! Commented 18/07/2019 às 18:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .