JSFiddle - React, Tailwind, and code Playground

by Alexander Malinov

HTML

<div id="object"></div>

CSS

#object {
	width: 100px;
	height: 100px;
	background-color: red;
}

JavaScript

var ruleChangeOpacity = "opacity: 0.5; transition: opacity 3s; -o-transition: opacity 3s; -ms-transition: opacity 3s; -moz-transition: opacity 3s; -webkit-transition: opacity 3s";
selector = ".transitionChangeOpacity";
stylesheet = document.styleSheets[0];

("insertRule" in stylesheet) ? stylesheet.insertRule(selector + "{" + ruleChangeOpacity + "}", 0): stylesheet.addRule(selector, ruleChangeOpacity, 0);

document.querySelector("#object").classList.toggle("transitionChangeOpacity");