JSFiddle - React, Tailwind, and code Playground

by vollossy

HTML

<div id="text">Текст</div>


<div id="telemetry">
    Offset:
    <span id="text_offset">
        <span id="top"></span>
        <span id="left"></span>
    </span>
</div>

<input type="text">
<button id="btn">Изменить текст</button>

JavaScript

$('#btn').click(function(e){
    var new_text = $('input').val();
    var newElement = $('<div id="text">'+new_text+'</div>');
    
    fadeTransition($('#text'), newElement)
});

function fadeTransition(element, newElement){
    var clone = element.clone();
    var elementOffset = element.offset();
    
    element.replaceWith(newElement);
    newElement.hide()
    
    clone.css('position', 'absolute');
    clone.offset(elementOffset);
    clone.appendTo(newElement.parent());
    
    clone.fadeOut('slow');
    newElement.fadeIn('slow');
}