JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div id="my-simple-div">
</div>

<button id="my-simple-btn">
Click me
</button>

CSS

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: background 1s;
}

.change div {
  background: yellow
}

JavaScript

class MyClass {
	attach() {
  	document.querySelector('#my-simple-btn').addEventListener('click', () => document.body.classList.toggle('change'))
    document.querySelector('#my-simple-div').addEventListener('transitionend', this.handler)
  }
  
  handler() {
  	console.log('inside handler')
    
  	document.querySelector('#my-simple-div').removeEventListener('transitionend', this.handler)
  }  
}

const cls = new MyClass()

cls.attach()