Transitional Module

_home.scss

// File: project/views/home
// Imported by: style.scss
//
// Description:
// 	Home page styles
//
// Requires:
// 	- Sass
// 	- Compass

.home {

	.transitional {

		.content {
			width: 500px;
			height: 200px;
			background: gray;
		}

		.item {
			width: 100%;
			height: 100%;
			display: block;
			background: green;

			&:last-child {
				background: red;
			}
		}
	}
}

.transitional {

	.content {
		position: relative;
		overflow: hidden;

		.item {
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			@include transform(scale(0));
			@include single-transition(all, 1000ms, ease);

			&[data-state="in"] {
				opacity: 1;
				@include transform(scale(1));
			}

			&[data-state="out"] {
				opacity: 0;
				@include transform(scale(2));
			}
		}
	}

	.list {
		display: none;
	}
}

home.html

{% extends "base.html" %}

{% block page_class %}home{% endblock page_class %}

{% block content %}
<h1>Transition Example</h1>

<div class="transitional">
	<div class="content">
	</div>

	<ul class="list">
		<li>One Item</li>
		<li>Another Item</li>
		<li>A Third Item</li>
	</ul>
</div>

{% endblock content %}

Home.js

define(

	[
		"./Page",
		"../modules/Transitional",
		"$"
	],

	function (Page, Transitional, $) {

		"use strict";

		return Page.extend({

			load : function () {
				this.sup();
				this.testTransitional = new Transitional({
					$tr : $('.transitional')
				});

				$('body').on("click", this.proxy(function () {
					// this.testTransitional.transition($('<li>FAKE ITEM</li>'));
					var rand = Math.floor(Math.random() * 3);
					this.testTransitional.transitionTo(rand);
				}));

			},

			transitionIn : function () {
				this.sup();
			},

			transitionOut : function () {
				this.sup();
			},

			destroy : function () {
				this.sup();
			}
		});
	}
);

Transitional.js

define(

	[
		"rosy/modules/Module",
		"$"
	],

	function (Module, $) {

		"use strict";

		return Module.extend({

			vars : {},

			events : {},

			$list : null,

			init : function (vars) {
				this.sup(vars);
				this.setupEvents();
				this.setupTransitional();
			},

			setupEvents : function () {

				var transEndEventNames = {
					'WebkitTransition' : 'webkitTransitionEnd',
					'MozTransition' : 'transitionend',
					'OTransition' : 'oTransitionEnd',
					'msTransition' : 'MSTransitionEnd',
					'transition' : 'transitionend'
				};

				this.events.transitionEnd = transEndEventNames[Modernizr.prefixed('transition')];
			},

			setupTransitional : function () {

				var $list = this.vars.$tr.find('.list'),
					$content = this.vars.$tr.find('.content');

				this.$list = $list.children();
				this.$content = $content;

				$list.remove();

				this.transitionTo(0);

			},

			transitionTo : function (index) {
				var $new = this.$list.eq(index).clone(true);
				this.transition($new);
			},

			transition : function ($to) {
				// First, transition existing items out.
				var $existing = this.$content.children();
				this.transitionOut($existing);
				this.transitionIn($to);
			},

			transitionOut : function ($out) {

				// Remove on transition out.
				this.onTransitionEnd($out, function ($el) {
					$el.remove();
				});

				$out.attr('data-state', "out");

			},

			transitionIn : function ($in) {

				$in.appendTo(this.$content).addClass('item');

				this.setTimeout(function () {
					$in.attr('data-state', "in");
				}, 0);

			},

			onTransitionEnd : function ($el, callback) {
				if (Modernizr.csstransitions) {
					$el.on(this.events.transitionEnd, this.proxy(function (e) {
						callback.apply(this, [$(e.currentTarget)]);
					}));
				} else {
					callback.apply(this, [$el]);
				}
			},

			destroy : function () {
				this.sup();
			}

		});
	}
);