JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#element {
  background: green;
  width: 200px;
  height: 200px;
  opacity: 1;
  -webkit-transition: 'all 0.5s ease-out';
  -moz-transition: 'all 0.5s ease-out';
  -ms-transition: 'all 0.5s ease-out';
  -o-transition: 'all 0.5s ease-out';
}

JavaScript

// 1 - square starts GREEN, with transitions
// 2 - square changes to BLUE, instantly
// 3 - square changes to RED, with transitions

// grab the element
var element = document.getElementById('element');

// setTimeout is used to execute the script after 2 seconds
// so we have time to see the blue being applied instantly
setTimeout(function()
{  
  // removeTransitions
  element.style.webkitTransition   = 'none';
  element.style.mozTransition      = 'none';
  element.style.msTransition       = 'none';
  element.style.oTransition        = 'none';

  // apply desired 'instant' property
  element.style.background            = 'blue'; // is applied instantly
  
  // this 10ms timeout is necessary for the transitions to be active again
  setTimeout(function() {
    element.style.webkitTransition   = 'all 5s ease-out';
    element.style.mozTransition      = 'all 5s ease-out';
    element.style.msTransition       = 'all 5s ease-out';
    element.style.oTransition        = 'all 5s ease-out';
    
    // apply an animated property
    element.style.background         = 'red'; // is applied smoothly
  }, 10);
    
}, 2000);