JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script src="https://rawgit.com/ractivejs/ractive-transitions-fly/master/ractive-transitions-fly.js"></script>
<main></main>

<script id='template' type='text/ractive'>
    <button on-click='prev'>previous</button>
    <button on-click='next'>next</button>
    
    <p>{{i}}</p>
    
    {{#with items[i]}}
        <div
            intro='fly:{{ {x:direction==="forward"?300:-300} }}'
            outro='fly:{{ {x:direction==="forward"?-300:300} }}'
        >{{this}}</div>
    {{/with}}
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

JavaScript

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        items: [ 'foo', 'bar', 'baz', 'qux' ],
        i: 0
    }
});

ractive.on({
    next: function () {
        var self = this, i = this.get( 'i' );
        i = ( i + 1 ) % this.get( 'items' ).length;
        
        console.log( 'i', i );
        
        this.set({
            direction: 'forward',
            i: null
        });
        
        this.set( 'i', i );
    },
    prev: function () {
        var self = this, i = this.get( 'i' );
        i = ( i ? this.get( 'items' ).length : i ) - 1;
        
        console.log( 'i', i );
        
        this.set({
            direction: 'back',
            i: null
        });
        
        this.set( 'i', i );
    }
});