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>Se ha solucionado con el setTimeout pero lo curioso es que aunque en setTimeout se da un retraso de 0 segundos, funciona. Lo dejo aqui por si alguien lo necesite

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');
        setTimeout(function () {
            $('#contenido').css({
                '-webkit-transition': 'all  1s',
                    '-webkit-transform': 'scale(0.5,0.5)',
                    'opacity': 0.5
            });
        }, 0);
    });

});