JSFiddle - React, Tailwind, and code Playground

by andredgusmao

HTML

<div id="container">
    <div id="menu"></div>
    <div id="tela1" class="quad"></div>
</div>

CSS

#container {}
#menu{width: 100%; height: 30px; background: black;}
.quad {
    width: 100%;
    height: 300px;
    position: absolute;
}

#tela1 {
    background: #127123;
}

#tela2 {
    background: #726192;
}

JavaScript

$.fn.efeito2 = function(angle, duration, easing, complete) {
    var args = $.speed(duration, easing, complete);
    var step = args.step;
    return this.each(function(i, e) {
        args.step = function(now) {
            $.style(e, 'transform', 'rotate(' + now + 'deg)');
            if (step) return step.apply(this, arguments);
        };

        $({deg: 0}).animate({deg: angle}, args);
    });
};

$.fn.efeito = function(html, duration, easing, complete) {
    console.log(this.width());
    var args = $.speed(duration, easing, complete),
        w = this.width();
    console.log(w);
    this.parent().append(html);
    this.animate({left: '-='+w+'px', opacity: 0}, args)
    .animate({opacity: 0}, 'slow');
}

$("#tela1").on('click', function() {
    var html = "<div id='tela2' class='quad'></div>";
    $(this).delay(300).efeito(html, 1000);
});