JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.jsdelivr.net/ractive.transitions-fade/latest/ractive-transitions-fade.min.js"></script>
<main></main>

JavaScript

function createView() {
    var newRactive = new Ractive({
        template: '<div intro-outro="fade:1000"><h1>{{message}}</h1></div>',
        data: { message: 'foo' }
    });

    newRactive.render('main').then(function () {
        var counter = 0;
        rerender(newRactive, counter);
        counter++;
        rerender(newRactive, counter);

    });
    
    setTimeout( function () {
        console.log( 'changing message' );
        newRactive.set( 'message', 'bar' );
        console.log( newRactive.get( 'message' ) );
        console.log( newRactive.find( 'h1' ).innerText );
    }, 3000 );
}

function rerender(ractive, counter) {

    ractive.teardown().then(function () {
        console.log("Teardown complete", counter);

        ractive.render('main').then(function () {
            console.log("Rerender complete", counter);
        });
    });
}

createView();