1

Tenho uma página index.html que contém um <p id="valor">

Que é atualizado através de uma WebSocket utilizando javascript.

Sempre que servidor envia a mensagem a função atualizar(valor) é chamada:

function atualizar(valor) {
  document.getElementById("valor").innerText = valor;
  document.getElementById("valor").style.animation = "example 1s 1";
}
body {
  background: #333;
}

#valor {
  color: #FFFFFF;
  font-family: "Trebuchet MS", Arial;
  margin-top: 5px;
  font-size: 36px;
  font-weight: bold;
}

@keyframes example {
  50% {
    font-size: 45px;
  }
  100% {
    font-size: 36px;
  }
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
<input type="text" onblur="atualizar(this.value);" />
<p id="valor">Meu texto padrão</p>

A ideia é que sempre ao atualizar o valor ele faça com o texto um animação Scale e Shake Effect. O problema é que ele só funciona na primeira vez que a função é chamada.

1
  • Matheus, a resposta foi suficiente para resolver seu problema? Se sim, por favor aceite a questão como resolvida, senão coloque suas dúvidas. Obrigado! Commented 27/01/2020 às 13:05

1 Resposta 1

1

Exemplo em javascript puro:

function atualizar(valor) {
  textBox = document.getElementById("valor");
  textBox.innerText = valor;
  requestAnimation(textBox);
}

var requestAnimation = function(obj) {
  obj.style.animation = 'none';
  window.requestAnimationFrame(function() {
     obj.style.animation = 'example 1s';
  });
}
body {
  background: #333;
}

#valor {
  color: #FFFFFF;
  font-family: "Trebuchet MS", Arial;
  margin-top: 5px;
  font-size: 36px;
  font-weight: bold;
}

@keyframes example {
  50% {
    font-size: 45px;
  }
  100% {
    font-size: 36px;
  }
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
<input type="text" onblur="atualizar(this.value);" />

<p id="valor">Meu texto padrão</p>


Observações:

  • A função requestAnimation será utilizada para fazer uma nova requisição de animação
  • Com isso sua animação e não ficará mais travada e pode ser executada quantas vezes quiser
  • Para exemplificar de forma simples nesse caso utilizei o evento onBlur
  • Para testar basta mudar o texto e tirar o foco da caixa de texto que a animação começará
  • Se quiser colocar em outro evento, por exemplo, no clique do mouse
    • Basta chamar a função atualizar(valor) no evento onClick do botão
    • Não esquecer de capturar o valor do seu input usando outra estratégia
  • Observe que para o exemplo funcionar coloquei um fundo escuro pois sua fonte é branca

Referência:

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 .