Skip to main content
4 de 5
adicionou 3 caracteres ao conteúdo
ℛɑƒæĿᴿᴹᴿ
  • 1,8mil
  • 1
  • 14
  • 30

###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:

ℛɑƒæĿᴿᴹᴿ
  • 1,8mil
  • 1
  • 14
  • 30