JSFiddle - React, Tailwind, and code Playground

by andfinally

HTML

<div id="thing">I will fade...</div>

<div id="f">
Toggle fade
</div>

CSS

#thing {
  background: red;
  line-height: 40px;
}

Babel + JSX

var s = document.getElementById('thing').style;
/* s.opacity = 1; */

function fadeOut() {
  (s.opacity -= 0.1) < 0 ? s.display = "none" : setTimeout(fadeOut, 40);
}

function fadeIn() {
  s.display = "block";
  if ((s.opacity += 0.1) > 1) {
    setTimeout(fadeIn, 40);
  }
}

const target = document.getElementById('thing');

document.getElementById('f').addEventListener('click', (e) => {
  if (s.display = "none") {
    fadeIn();
  } else {
    fadeOut();
  }
});