CODEWITHSUNDEEP
javascripthtmlcsscss-animations
dactyrafficle
dactyrafficle

Reputation: 868

briefly highlight text on input

I have an html table that reports dimension (length/width/height/volume) vs metric (in/ft/cm/m). Each td element contains an input element. When you change a value, the others in the table recalculate based on the new value. Here is a fiddle:

http://jsfiddle.net/r9h8xfuy/1/

When you change a value, not all cells in the table are affected. So I wanted to draw attention to the ones that are affected by making them flash a little bit.

This much simpler example gets to the heart of the matter for me:

http://jsfiddle.net/cft7n6ej/6/

The problem is that while the input event listener does exactly what I want in terms of recalculating the table values, it is not working well with the function I wrote: glowText(element). Or maybe my function stinks!

I wrote glowText(element) thinking the following logic would hold: I enter a value that is captured by the input event listener. The element argument to glowText is added a class, glow. When I open up the console, I can see that the element in question can have many glow classes, hence the space in element.className += ' glow';. Now, each time I add the class glow, the css animation should start. But I was hoping it would override the existing animations, but it does not appear to be doing that. Anyhow, once the css animation is done, a glow class is removed from the element.

The result I would like is as follows:

Whenever the input event listener is triggered, the glow css animation starts from the beginning, overriding any currently running glow css animations.

Brief edit: I'm wondering if a possible solution might lie in terminating the currently running css animation before triggering the next one? Is it possible to do that?

Here is the key bit of css:

@keyframes glow {
 0% {
  color: rgb(255,40,180);
  font-weight: 900;
  text-shadow: 0px 0px 20px rgb(255,140,180);
 }
 50% {
  color: rgb(255,40,180);
  font-weight: normal;
  text-shadow: none;
 }
 100% {
  color: black;
 }
}

.glow {
 animation: glow 1s ease-out 0s 1;
 -webkit-animation: glow 1s ease-out 0s 1;
}

Javascript:

function glowText(element) {
 element.className += ' glow';
 element.addEventListener('animationend', function() {
  this.classList.remove('glow');
 });
}
var myInput = document.getElementById('myInput');
var myOutput = document.getElementById('myOutput')
myInput.addEventListener('input', function() {
  myOutput.textContent = myInput.value*2;
  glowText(myOutput);
})

Upvotes: 1

Views: 402

Answers (1)

wazz
wazz

Reputation: 5068

I think I've got something for you. I'm not sure if the calculation is in the best place but it works. Watch out: I added class glow to the output p.

var myInput = document.getElementById('myInput');
var myOutput = document.getElementById('myOutput');

myInput.addEventListener('input', function(e) {
    myOutput.textContent = myInput.value * 2;

    myOutput.classList.remove("glow");

    void myOutput.offsetWidth;

    myOutput.classList.add("glow");
    
}, false);
@keyframes glow {
    0% {
        color: rgb(255, 40, 180);
        font-weight: 900;
        text-shadow: 0px 0px 20px rgb(255, 140, 180), 0px 0px 2px rgb(255, 40, 180);
    }
    50% {
        color: rgb(255, 40, 180);
        font-weight: normal;
        text-shadow: none;
    }
    100% {
        color: black;
    }
}

.glow {
    animation: glow 1s ease-out 0s 1;
    -webkit-animation: glow 1s ease-out 0s 1;
}
<body>
    <input type='text' id='myInput' value='5' />

    <p id='myOutput' class='glow'>
        25
    </p>
</body>

Upvotes: 1

Related Questions