- [Added] MooTools Transition

- [Added] jQuery Transition
- Moved stuff around a bit

Source/CSSAnimation.MooTools.js

@@ -29,17 +29,41 @@ Element.Properties.transform = {
 
 };
 
+Element.Properties.transition = {
+
+	set: function(supported){
+		return this.store('transition', new Transition(this, supported));
+	},
+
+	get: function(){
+		var instance = this.retrieve('transition');
+		return instance || this.set('transition').get('transition');
+	}
+
+};
+
 (function(){
+
 	var obj = {};
+
 	['translate', 'rotate', 'scale', 'skew'].each(function(method){
-		obj[method] = function(axis, value){
-			this.get('transform')[method](axis, value);
+		obj[method] = function(){
+			var instance = this.get('transform');
+			instance[method].apply(instance, Array.slice(arguments, 0));
 			return this;
 		};
 	});
+
 	obj.clearTransform = function(){
 		this.get('transform').clear();
 		return this;
-	}
+	};
+
+	obj.setTransition = function(){
+		var instance = this.get('transition');
+		instance.set.apply(instance, Array.slice(arguments, 0));
+	};
+
 	Element.implement(obj);
+
 }());

Source/CSSAnimation.jQuery.js

@@ -18,26 +18,50 @@ provides: [jQuery]
 
 ;(function($){
 
-var get = function(){
-	return $(this).data('transform') || new Transform(this);
+var getTransform = function(){
+	var $this = $(this),
+		instance = $this.data('transform');
+	if (!instance) {
+		instance = new Transform(this);
+		$this.data('transform', instance);
+	}
+	return instance;
+},
+
+getTransition = function(){
+	var $this = $(this),
+		instance = $this.data('transition');
+	if (!instance) {
+		instance = new Transition(this);
+		$this.data('transition', instance);
+	}
+	return instance;
 };
 
 $.each(['translate', 'rotate', 'scale', 'skew'], function(i, method){
 
-	$.fn[method] = function(axis, value){
+	$.fn[method] = function(){
+		var args = arguments;
 		return $(this).each(function(){
-			var instance = get.apply(this);
-			instance[method](axis, value);
+			var instance = getTransform.apply(this);
+			instance[method].apply(instance, Array.prototype.slice.call(args, 0));
 		});
 	}
 
 });
 
 $.fn.clearTransform = function(){
 	return $(this).each(function(){
-		var instance = get.apply(this);
-		instance.clear();
+		var instance = getTransform.apply(this).clear();
+	});
+};
+
+$.fn.transition = function(){
+	var args = arguments;
+	return $(this).each(function(){
+		var instance = getTransition.apply(this);
+		instance.set.apply(instance, Array.prototype.slice.call(args, 0));
 	});
 };
-	
+
 })(jQuery);

Tests/Transition/Transition_(MooTools).html

@@ -0,0 +1,63 @@
+<style>
+#container {
+	width: 400px;
+	height: 280px;
+	position: absolute;
+	left: 440px;
+	top: 40px;
+	text-align: center;
+	-webkit-perspective: 800;
+}
+#transformer {
+	width: 50%;
+	height: 50%;
+	background: #ccc;
+	line-height: 100px;
+	font-size: 25px;
+}
+</style>
+
+<div id=container>
+	<div id=transformer>Transform me!</div>
+</div>
+
+<script src="/depender/build?require=CSSAnimation/MooTools,Core/Element.Event"></script>
+
+<script>
+var fixture = $('transformer'),
+	transform = new Transform(fixture);
+
+fixture.setTransition({
+	property: 'transform',
+	'timing-function': 'ease-out',
+	duration: '500ms'
+});
+
+makeActions([
+	{
+		fn: function(){
+			transform.set('translateX(50%)');
+		},
+		title: "translateX",
+		description: 'Constructed with the property as transform, should move across the X axis.'
+	},
+	{
+		fn: function(){
+			fixture.setTransition('property', 'margin-top');
+			fixture.style.marginTop = '50px';
+		},
+		title: "setTransition('property', 'margin-top')",
+		description: 'Should change the transition property to margin-top and move down 50px'
+	},
+	{
+		fn: function(){
+			fixture.setTransition('property', 'background-color, color');
+			fixture.style.color = '#fff';
+			fixture.style.backgroundColor = '#000'
+		},
+		title: "set('property', 'background-color, color')",
+		description: 'Should support multiple properties'
+	}
+]);
+
+</script>

Tests/Transition/Transition_(jQuery).html

@@ -0,0 +1,63 @@
+<style>
+#container {
+	width: 400px;
+	height: 280px;
+	position: absolute;
+	left: 440px;
+	top: 40px;
+	text-align: center;
+	-webkit-perspective: 800;
+}
+#transformer {
+	width: 50%;
+	height: 50%;
+	background: #ccc;
+	line-height: 100px;
+	font-size: 25px;
+}
+</style>
+
+<div id=container>
+	<div id=transformer>Transform me!</div>
+</div>
+
+<script src="/depender/build?require=CSSAnimation/jQuery,Core/Element.Event"></script>
+
+<script>
+var fixture = $('#transformer'),
+	transform = new Transform(fixture[0]);
+
+fixture.transition({
+	property: 'transform',
+	'timing-function': 'ease-out',
+	duration: '500ms'
+});
+
+makeActions([
+	{
+		fn: function(){
+			transform.set('translateX(50%)');
+		},
+		title: "translateX",
+		description: 'Constructed with the property as transform, should move across the X axis.'
+	},
+	{
+		fn: function(){
+			fixture.transition('property', 'margin-top');
+			fixture[0].style.marginTop = '50px';
+		},
+		title: "setTransition('property', 'margin-top')",
+		description: 'Should change the transition property to margin-top and move down 50px'
+	},
+	{
+		fn: function(){
+			fixture.transition('property', 'background-color, color');
+			fixture[0].style.color = '#fff';
+			fixture[0].style.backgroundColor = '#000'
+		},
+		title: "set('property', 'background-color, color')",
+		description: 'Should support multiple properties'
+	}
+]);
+
+</script>