JSFiddle - React, Tailwind, and code Playground

by matake

HTML

<div id="origen">
		<div id="contenido">
			 Algun contenido
		</div>
	</div>
	<div id="destino">

	</div>
	<div style="clear:both"></div>
	<button id="btn1">escalar en el origen Ok </button>
	<button id="btn2">escalar en el destino Not Ok</button>
	<br><br>
	para poder reintentar hay que darle otra vez a "run" en el menu arriba a la izquierda
<br><br>

Lo que no funciona es el 'transition': 'all  1s' despues de hacer appendTo('#destino')

CSS

#origen,#destino{
		width:100px;
		height:100px;
		float:left;
		border:solid 1px;
	}

JavaScript

$(document).ready(function(){

	$('#btn1').off('click').on('click',function(){
	
		$('#contenido').css({
			'-webkit-transition': 'all  1s',
			'-moz-transition': 'all  1s',
			'-o-transition': 'all  1s',
			'transition': 'all  1s',
			
			'-webkit-transform': 'scale(0.5,0.5)',
			'-moz-transform': 'scale(0.5,0.5)',
			'-o-transform': 'scale(0.5,0.5)',
			'-ms-transform': 'scale(0.5,0.5)',
			'transform': 'scale(0.5,0.5)',
		});			
	});
	
	$('#btn2').off('click').on('click',function(){

		$('#contenido').appendTo('#destino');
		
		$('#contenido').css({
			'-webkit-transition': 'all  1s',
			'-webkit-transform': 'scale(0.5,0.5)',
			'opacity': 0.5
		});			
	});	

});