JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<button id="morph">Преобразовать</button>
<button id="original">Вернуть</button>
<div class="quote">
    <p data-original="Я поражаюсь, как люди каждый раз делают одно и то же, принципиально не смотрю старые советские фильмы в Новый Год!" data-morph="Я каждый раз смотрю старые советские фильмы в Новый Год!"></p>  
</div>

CSS

.quote {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    padding:30px;
    line-height: 30px;
    display: table;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
text-align: center;
}
.start .red {
    color:#f00;
}
.quote p {
    font-size: 0;   
}
span {
    font-size: 18px;    
    -webkit-transition: all cubic-bezier(1,-0.24, 0, 1.27) 0.4s;
    -moz-transition: all cubic-bezier(1,-0.24, 0, 1.27) 0.4s;
    -ms-transition: all cubic-bezier(1,-0.24, 0, 1.27) 0.4s;
    -o-transition: all cubic-bezier(1,-0.24, 0, 1.27) 0.4s;
    transition: all cubic-bezier(1,-0.24, 0, 1.27) 0.4s;
    overflow:hidden;    
    display: inline-block;
    height: 30px;
    margin-right: 10px;
}
span.black.fade {
    opacity: 0;   
}
.morph span.black {
   width:0!important; 
   margin-right: 0;
}
.morph span.red {
    display: inline-block;
}

JavaScript

var original = $('.quote p').attr('data-original').split(" ");
for (var i = 0; i < original.length; i++) {
    $('.quote p').append('<span class="black">' + original[i] + '</span> ');
}
var morph = $('.quote p').attr('data-morph').split(" ");
var compare = $.grep(original, function(word) {
    return $.inArray(word, morph ) !== -1;
});
$('.quote p span').each(function() {
    for (var j = 0; j <compare.length; j++) {
        $(this).width($(this).width());
        if ($(this).text() == compare[j]) {
            $(this).removeClass('black').addClass('red');
        }
    }
});
var morphFunc = function() {
    $('.quote').addClass('start');
    $('span.black').addClass('fade');
    setTimeout(function() {
        $('.quote').addClass('morph');        
    }, 400);
    setTimeout(function() {
        $('span.black').removeClass('fade');
    }, 800);
}
var originalFunc = function() {
    $('.quote').removeClass('start');
    $('span.black').addClass('fade');
    setTimeout(function() {
        $('.quote').removeClass('morph');        
    }, 400);
    setTimeout(function() {
        $('span.black').removeClass('fade');
    }, 800);
}
$('#morph').on('click', function() {
    morphFunc();
});
$('#original').on('click', function() {
    originalFunc();
});