[Added] SlideShow.CSS, CSS Transitions are buttery smooth.

Source/SlideShow.CSS.js

@@ -0,0 +1,103 @@
+/*
+---
+
+name: SlideShow.CSS
+
+description: Adds CSS transform transitions.
+
+license: MIT-style license.
+
+authors: Ryan Florence <http://ryanflorence.com>
+
+requires:
+  - SlideShow
+  - CSSAnimation/MooTools
+
+provides:
+  - SlideShow.CSS
+
+...
+*/
+
+(function(){
+
+	var getAxis = function(direction){
+			return {
+				property: (direction == 'left' || direction == 'right') ? 'x' : 'y',
+				inverted: (direction == 'left' || direction == 'up') ? 1 : -1
+			};
+		},
+		go = function(type, axis, data){
+			var transition = {
+				duration: data.duration + 'ms',
+				'timing-function': 'ease',
+				property: 'transform'
+			};
+
+			if (type == 'blind') {
+				data.next.setStyle('z-index', 2);
+			}
+
+			if (type != 'slide') {
+				data.next.translate(axis.property, 100 * axis.inverted);
+			}
+
+			setTimeout(function(){
+				if (type != 'slide') data.next.setTransition(transition).translate(axis.property, 0);
+				if (type != 'blind') data.previous.setTransition(transition).translate(axis.property, -(100 * axis.inverted));
+			}, 0)
+
+		};
+
+	['left', 'right', 'up', 'down'].each(function(direction){
+
+		var capitalized = direction.capitalize(),
+			blindName = 'blind' + capitalized + 'CSS',
+			slideName = 'slide' + capitalized + 'CSS';
+
+		[
+			['push' + capitalized + 'CSS', (function(){
+				var axis = getAxis(direction);
+				return function(data){ go('push', axis, data); }
+			}())],
+			[blindName, (function(){
+				var axis = getAxis(direction);
+				return function(data){ go('blind', axis, data); }
+			}())],
+			[slideName, (function(){
+				var axis = getAxis(direction);
+				return function(data){ go('slide', axis, data); }
+			}())]
+		].each(function(transition){
+			SlideShow.addTransition(transition[0], transition[1]);
+		});
+	});
+
+})();
+
+SlideShow.CSS = new Class({
+
+	Extends: SlideShow,
+
+	options: {
+		useCSS: false
+	},
+
+	setup: function(options){
+		this.parent(options);
+		if (this.options.useCSS) this.overrideWithCSS();
+	},
+
+	overrideWithCSS: function(){
+		['left', 'right', 'up', 'down'].each(function(direction){
+			var capitalized = direction.capitalize(),
+				blindName = 'blind' + capitalized,
+				slideName = 'slide' + capitalized;
+			this.transitions[blindName] = this.transitions[blindName + 'CSS'];
+			this.transitions[slideName] = this.transitions[blindName + 'CSS'];
+			this.transitions['push' + capitalized] = this.transitions['push' + capitalized + 'CSS'];
+		}.bind(this));
+		return this;
+	},
+
+});

Tests/SlideShow/SlideShow_(CSS-Transitions).html

@@ -0,0 +1,115 @@
+<style>
+div#slides {
+	width: 500px;
+	height: 280px;
+	overflow: hidden;
+	position: absolute;
+	left: 450px;
+	top: 22px;
+}
+
+div#slides div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 200px;
+	width: 500px;
+	font-size: 40px;
+	padding-top: 80px;
+	text-align: center;
+	color: #fff;
+}
+
+.red {background: #e40053;}
+.blue {background: #0094d5;}
+.green {background: #43aa38;}
+
+#events {
+	position: absolute;
+	top: 320px;
+	left: 450px;
+}
+
+#slides p {
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	z-index: 3;
+	color: white;
+}
+
+</style>
+
+<div id="slides" data-slideshow="delay:2000, duration:1000, transition:fade">
+	<div data-slideshow="transition:none"                     class=green>0<br> none</div>
+	<div data-slideshow="transition:slideDown"             class=blue>1<br> slideDown</div>
+	<div data-slideshow="transition:slideUp"               class=red>2<br> slideUp</div>
+	<div data-slideshow="transition:slideLeft"             class=green>3<br> slideLeft</div>
+	<div data-slideshow="transition:slideRight"            class=blue>4<br> slideRight</div>
+	<div data-slideshow="transition:pushUp, duration:500"  class=red>5<br> pushUp:500</div>
+	<div data-slideshow="transition:pushDown"              class=blue>6<br> pushDown</div>
+	<div data-slideshow="transition:pushLeft"              class=green>7<br> pushLeft</div>
+	<div data-slideshow="transition:pushRight"             class=blue>8<br> pushRight</div>
+	<div data-slideshow="transition:blindUp"               class=red>9<br> blindUp</div>
+	<div data-slideshow="transition:blindDown"             class=green>10<br> blindDown</div>
+	<div data-slideshow="transition:blindLeft"             class=blue>11<br> blindLeft</div>
+</div>
+
+<p id=events>
+	<b>Events:</b>
+	<span id="onShow">show</span>
+	<span id="onShowComplete">showComplete</span>
+	<span id="onPlay">play</span>
+	<span id="onPause">pause</span>
+	<span id="onReverse">reverse</span>
+</p>
+
+<script src="/depender/build?require=SlideShow/SlideShow.CSS,Core/Element.Event"></script>
+
+<script>
+
+// tests element methods in the background
+var mySlideShow = new SlideShow.CSS('slides', {
+	useCSS: true
+});
+
+mySlideShow.addEvents({
+	onShow: function(){ $('onShow').highlight(); },
+	onShowComplete: function(){ $('onShowComplete').highlight(); },
+	onReverse: function(){ $('onReverse').highlight(); },
+	onPlay: function(){ $('onPlay').highlight(); },
+	onPause: function(){ $('onPause').highlight(); }
+});
+
+makeActions([
+	{
+		fn: function(){
+			mySlideShow.play();
+		},
+		title: 'play',
+		description: 'Plays the slideshow'
+	},
+	{
+		fn: function(){
+			mySlideShow.pause();
+		},
+		title: 'pause',
+		description: 'Stops the slideshow'
+	},
+	{
+		fn: function(){
+			mySlideShow.show('next');
+		},
+		title: "show('next')",
+		description: 'Shows the next slide.'
+	},
+	{
+		fn: function(){
+			mySlideShow.show('previous');
+		},
+		title: "show('previous')",
+		description: 'Shows the previous slide'
+	}
+]);
+
+</script>

package.yml

@@ -22,4 +22,5 @@ license: MIT-style license.
 
 sources:
   - "Source/SlideShow.js"
+  - "Source/SlideShow.CSS.js"
   #- "Source/SlideShow.Nav.js"