JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p />
</div>

CSS

p{
    opacity: 0;
    transition: opacity 10s, transform 5s;
    background: red;
    width: 50px;
    height: 50px;
    margin: 100px;    
}

div.visible p{
    opacity: 1;
    transform: scale(1.5);
}

JavaScript

(function($){
    
  $.event.special.transitionsComplete = {

    setup: function( data, namespaces, eventHandle ) {
		
		var allTransitions 			= [];
			w						= window,
			TRANSITION_PROPERTY_KEY = 'transition-property',
			TRANSITION_DURATION_KEY = 'transition-duration',
			$node					= $( this );
			
		function collectTransitionsRecursively( node ) {
			
			var style					= w.getComputedStyle( node ),
				nodeComputedProperties	= style.getPropertyValue( TRANSITION_PROPERTY_KEY ).split( ', ' ),
				nodeComputedDurations	= style.getPropertyValue( TRANSITION_DURATION_KEY ).split( ', ' );
				
			for( var i = 0; i < nodeComputedDurations.length; i++ )
				if( nodeComputedDurations[ i ] !== '0s' )
					allTransitions.push( nodeComputedProperties[ i ] );
				
			for( var childIndex = 0; childIndex < node.children.length; childIndex++ )
				collectTransitionsRecursively( node.children[ childIndex ] );
		}

		function triggerTransitionsComplete( $onNode ) {
			
			console.log( "No transitions (left)." );
			
			$onNode.trigger('transitionsComplete');
		}
		
		function onNoTransitionsFound() {
			
			setTimeout( function() {
				
				triggerTransitionsComplete( $node );
			});
		}
        
		collectTransitionsRecursively( this );
		
		if( allTransitions.length == 0 )
			return onNoTransitionsFound();
		else
			console.log( 'remaining', allTransitions );    
		
		$node.on('webkitTransitionEnd.x transitionend.x', function( e ){ 
			
			allTransitions.splice(allTransitions.indexOf(e.originalEvent.propertyName));
			
			if( allTransitions.length == 0 )
				triggerTransitionsComplete( $node );
			else
				console.log('remaining', allTransitions);
		});
    },

    teardown: function( namespaces ) {
		
      $( this ).off( '.x' );
    }
  };
})(jQuery);


var div = $('div'), p = $('p'), start = new Date().getTime();
console.log('-- start --');
div.addClass('visible');

div.one('transitionsComplete', function(e){
    console.log('complete-div', (new Date().getTime() - start) /...