JSFiddle - React, Tailwind, and code Playground

by digitalzebra

HTML

<div id="definitionBody">
  
    <a id="ideo|adv.|||"></a>
    <span id="termName" class="name">
      <span class="bold">
        <span class="ital">ideo</span>
      </span>
     </span><br>
    <span class="grayline">(<span class="bold"><span class="smallcaps">i</span></span>-dee-oh), </span>
    <span class="grayline">
      <span class="ital">adv.</span>
     </span>
  
  <span class="grayline">[Latin] </span>
  <span class="sense">
    Therefore; for that reason.
  </span>
</div>

CSS

.backgroundRed{
        background: #F00;
    }
.backgroundGray {
    background: #b0b9c9;
}

  .animatedBackground {
        -webkit-transition: background 1.0s ease-in-out;
        -moz-transition:    background 1.0s ease-in-out;
        -ms-transition:     background 1.0s ease-in-out;
        transition:         background 1.0s ease-in-out;
    }

JavaScript

flashBackground("termName");

function flashBackground(hashcode) {
    
    var element = document.getElementById(hashcode);//.nextSibling;
    console.log(element);
    addClass(element, "animatedBackground");
    var x = 0;
    var intervalID = setInterval(function() {
        toggleClass(element, "backgroundGray");
        if (++x === 2) {
            window.clearInterval(intervalID);
        }
    },1000);
}

function hasClass(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
function addClass(elem, className) {
    if (!hasClass(elem, className)) {
        elem.className += ' ' + className;
    }
}
function removeClass(elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}
function toggleClass(elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
            newClass = newClass.replace( ' ' + className + ' ' , ' ' );
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}