JSFiddle - React, Tailwind, and code Playground

by rdillman

HTML

<div class="element" id="element">
  <p>
    element
  </p>
</div>

SCSS

.element {
  width: 200px;
  height: 40px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation-delay: 100ms;
  animation-timing-function: ease;
  animation-duration: 200ms;
  animation-name: fadeIn;
  animation-fill-mode: both;
}

.isVisible {
 ::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: tomato;
    z-index: -1;
    animation-timing-function: ease;
    animation-duration: 500ms;
    animation-name: fadeIn;
  } 
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  
  to {
    opacity: 1;
  }
}

JavaScript

const element = document.getElementById('element');
let isClicked = false;

element.addEventListener('click', handleClick, false);

function handleClick() {
	if (isClicked) {
  	element.classList.add('isVisible');
  } else {
  	element.classList.remove('isVisible');
  }
  
  isClicked = !isClicked;
}