JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<button id="toggle">Toggle</button>
<div id="box"></div>

SCSS

#box {
	background: #000;
	height: 100px;
	width: 100px;

	&.is-hidden {
		display: none;
	}
	
	&.is-animatable {
		display: block;
		transition: all 300ms;
	}
}

JavaScript

let toggle = document.querySelector('#toggle')
let box = document.querySelector('#box')


let fadeIn = function() {
	box.classList.remove('is-hidden')
	box.classList.add('is-animatable')
	let onTransitionEnd = () => {
		box.removeEventListener('transitionend', onTransitionEnd)
	}
	box.addEventListener('transitionend', onTransitionEnd)
	requestAnimationFrame( () => {
		box.style.opacity = '1'
	})
}


let fadeOut = function(){
	box.classList.add('is-animatable')
	let onTransitionEnd = () => {
		box.classList.add('is-hidden')
		box.removeEventListener('transitionend', onTransitionEnd)
	}
	box.addEventListener('transitionend', onTransitionEnd)
	requestAnimationFrame( () => {
		box.style.opacity = '0'
	})
}


toggle.addEventListener('click', function(){
	if( box.classList.contains('is-hidden') ) {
		fadeIn()
	} else {
		fadeOut()
	}
})