Change Hover Transition to Click Transition

Hover transition has an initial delay that is canceled by a click that triggers the transition immediately.

by Travis Almand

HTML

<div id="trigger"></div>
<div id="tooltip"></div>

CSS

#trigger {
  height: 100px;
  width: 100px;
  background-color: red;
}
#tooltip {
  height: 100px;
  width: 100px;
  background-color: blue;
  
  opacity: 0;
  transform: scale3d(0.5, 0.5, 1);
  transition: all 300ms;
}

#tooltip.hover {
  opacity: 1;
  transform: scale3d(1, 1, 1);
  transition-delay: 2000ms;
}

#tooltip.click {
  opacity: 1;
  transform: scale3d(1, 1, 1);
  transition-delay: 0ms;
}

#tooltip.clear {
  opacity: 0;
  transform: scale3d(0.5, 0.5, 1);
  transition: none;
}

JavaScript

const trigger = document.querySelector('#trigger');
const tooltip = document.querySelector('#tooltip');

trigger.addEventListener('mouseenter', function () {
	tooltip.classList.add('clear');
  
	window.requestAnimationFrame(function () {
  	tooltip.classList.remove('clear');
  	tooltip.classList.add('hover');
  });
});

trigger.addEventListener('mouseleave', function () {
  tooltip.classList.remove('hover');
});

trigger.addEventListener('click', function (e) {
	e.stopPropagation();
  tooltip.classList.add('clear');
  
  window.requestAnimationFrame(function () {
  	tooltip.classList.remove('clear');
		tooltip.classList.remove('hover');
		tooltip.classList.toggle('click');
  });
});

document.addEventListener('click', function () {
  tooltip.classList.remove('hover');
  tooltip.classList.remove('click');
});