2

É possível inserir um elemento animado no DOM de forma sincronizada? ou seja, ao inserir o estado atual é mantido e não resetado como no exemplo abaixo...

function add() {
	let ctn = document.getElementById('ctn');
  
  ctn.insertAdjacentHTML('beforeend', '<div class="pulse">teste</div>');
}
#ctn {
  width: 100px;
  background-color: green;
}
.pulse {
  animation: pulse 0.7s infinite;
  padding: 10px;
  margin: 0 auto;
  display: table;
  animation-direction: alternate;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-background-color: rgba(0,0,0,0);
  }
  100% {
    -webkit-background-color: rgba(255,255,255,0.5);
  }
}

@keyframes pulse {
  0% {
    background-color: rgba(0,0,0,0);
  }
  100% {
    background-color: rgba(255,255,255,0.5);
  }
}
<div id="ctn">
  <div class="pulse">teste</div>
</div>
<button onclick="add()" >
  Inserir
</button>

1 Resposta 1

1

É possível definindo o animation para none e usando setTimeout para depois de um pequeno delay, esvaziar o animation. Ao esvaziar, ele herdará o que foi definido inicialmente no CSS, fazendo com que todos .pulse iniciem ao mesmo tempo.

Veja exemplo:

function add() {
	let ctn = document.getElementById('ctn');
  
  ctn.insertAdjacentHTML('beforeend', '<div class="pulse">teste</div>');
  
  let pulse = document.body.querySelectorAll(".pulse");
  
  pulse.forEach(item=>{
     item.style.animation = "none";
  });
  setTimeout(function(){
     pulse.forEach(item=>{
        item.style.animation = "";
     });
  }, 100);
  
}
#ctn {
  width: 100px;
  background-color: green;
}
.pulse {
  animation: pulse 0.7s infinite;
  padding: 10px;
  margin: 0 auto;
  display: table;
  animation-direction: alternate;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-background-color: rgba(0,0,0,0);
  }
  100% {
    -webkit-background-color: rgba(255,255,255,0.5);
  }
}

@keyframes pulse {
  0% {
    background-color: rgba(0,0,0,0);
  }
  100% {
    background-color: rgba(255,255,255,0.5);
  }
}
<div id="ctn">
  <div class="pulse">teste</div>
</div>
<button onclick="add()" >
  Inserir
</button>

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 .