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).