JSFiddle - React, Tailwind, and code Playground

by Pedro Pinto

HTML

<button>toggle</button>

<div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem accusamus aut autem, amet unde, soluta inventore corporis cupiditate consectetur ipsam itaque animi ratione rerum optio reiciendis voluptate iste repudiandae explicabo!</p></div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat saepe dolorem ipsa blanditiis, vel rerum sed consequuntur voluptatem velit pariatur eligendi recusandae neque. Debitis deleniti, facilis ratione cumque, impedit tenetur!</p>

CSS

div {
  background-color: red;
  transition: opacity 1s;
}

div.closed {
  opacity: 0;

  animation-name: close;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
  animation-fill-mode: forwards;
}

@keyframes close { /* "display none" */
  0% {}
  100% {
    visibility: hidden;
    position: absolute;
    top: -1000vh;
    left: -1000vw;
  }
}

JavaScript

var div = document.querySelector('div');
var button = document.querySelector('button');

button.addEventListener('click', function() {
	if (div.classList.contains('closed')) {
    div.classList.remove('closed');
  } else {
		div.classList.add('closed');
  }
});