JSFiddle - React, Tailwind, and code Playground

by Jack Violet

HTML

<div id="demo">
  <button id="btnMy">hide</button>
  <p name="fade">Hello World</p>
</div>

CSS

#demo {
          width: 400px;
          height: 400px;
          border: solid 1px red;
        }

        .fade-enter-active,
        .fade-leave-active {
          transition: opacity .5s;
        }

        .fade-enter,
        .fade-leave-to {
          opacity: 0;
        }

        .hidden {
          display: none;
        }

JavaScript

var btnMy = document.getElementById("btnMy")
var p = document.getElementsByName("fade")[0]
btnMy.onclick = function() {
  var kls = "fade"
  if (p.className == "hidden") {
    btnMy.textContent = "hide"
    p.className = `${kls}-enter ${kls}-enter-active`

    setTimeout(() => {
      p.className = `${kls}-enter-active ${kls}-enter-to`
    }, 800);

    setTimeout(() => {
      p.className = ``
    }, 1000);
  } else {
    btnMy.textContent = "show"
    p.className = `${kls}-leave ${kls}-leave-active`

    setTimeout(() => {
      p.className = `${kls}-leave-active ${kls}-leave-to`
    }, 800);

    setTimeout(() => {
      p.className = `hidden`
    }, 1000);
  }
}