Problem with css Animation called by a javascript function

Asked

Viewed 44 times

1

I have a page index.html containing a <p id="valor">

Which is updated via a Websocket using javascript.

Every time the server sends the message the function atualizar(valor) is called:

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>

The idea is that always when updating the value it makes with the text an animation Scale and Shake Effect. The problem is that he only works the first time that the function is called.

javascript css

  • Matheus, was the answer enough to solve your problem? If yes, please accept the question as resolved, otherwise ask your questions. Thank you!

1 answer

1


Example in javascript pure:

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>

Remarks:

  • The function requestAnimation will be used to make a new animation request
  • With this your animation and will no longer be locked and can be executed as many times as you want
  • To illustrate simply in this case I used the event onBlur
  • To test just change the text and take the focus of the text box that the animation will start
  • If you want to put in another event, for example, at the mouse click
    • Just call the function atualizar(valor) at the event onClick button
    • Don’t forget to capture the value of your input using another strategy
  • Note that for the example work I put a dark background because its source is white

Reference:

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.