JSFiddle - React, Tailwind, and code Playground

by bartek

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.js"></script>
<script src="https://rawgit.com/jmeas/marionette.transition-region/travis/marionette.transition-region.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<button class='slide-in btn btn-xs'>Show SlideView</button>
<div class='slide-region region'></div>

CSS

body {
    font-family: Helvetica, Arial, sans-serif;
}
.view {
    width: 100%;
    background: #eee;
    border: dashed;
    border-left-color: #ff0000;
}
.region {
    position: relative;
    overflow: hidden;
    outline: 1px solid #ddd;
    margin-bottom: 15px;
    height: 280px;
}
#item-view {
    background: green;
    width: 400px;
    height: 280px;
}
.dupa {
    padding: 20px;
}

JavaScript

var slideRegion = new Marionette.TransitionRegion({
    el: '.slide-region',
    concurrentAnimation: true
});

var ANIMATION_DURATION = 400;

var SlideView = Marionette.ItemView.extend({
    template: _.template('<div id="item-view" class="center-block"><form data-type="new" class="dupa"><div class="form-content-region"><div class="form-group"><input type="text" class="form-control"></input></div></div><button class="btn" type="submit">Start</button></form></div>'),
    className: 'animated-view view',

    transitionInCss: {
        position: 'absolute',
        left: window.innerWidth / 2 + 200,

    },

    animateIn: function () {
        this.$el.animate({
            left: 0
        },
        ANIMATION_DURATION,
        _.bind(this.trigger, this, 'animateIn'));
    },

    animateOut: function () {
        this.$el.animate({
            left: -window.innerWidth / 2 - 200
        },
        ANIMATION_DURATION,
        _.bind(this.trigger, this, 'animateOut'));
    }
});

function newSlideView() {
    var slideView = new SlideView({
        model: new Backbone.Model({})
    });
    slideRegion.show(slideView);
}

var $slideIn = $('.slide-in');

$slideIn.on('click', newSlideView);