From 3732485dfad83cb944c1d116da60d9e3807109f8 Mon Sep 17 00:00:00 2001
From: Philip Walton
Date: Wed, 6 Jun 2012 12:44:55 -0700
Subject: [PATCH 01/89] updated the deferredRun function to force a repaint
without using setTimeout
---
jquery.transit.js | 9 ++-------
1 file changed, 2 insertions(+), 7 deletions(-)
diff --git a/jquery.transit.js b/jquery.transit.js
index 6f810b1..55c5146 100644
--- a/jquery.transit.js
+++ b/jquery.transit.js
@@ -565,13 +565,8 @@
// Defer running. This allows the browser to paint any pending CSS it hasn't
// painted yet before doing the transitions.
var deferredRun = function(next) {
- var i = 0;
-
- // Durations that are too slow will get transitions mixed up.
- // (Tested on Mac/FF 7.0.1)
- if ((support.transition === 'MozTransition') && (i < 25)) { i = 25; }
-
- window.setTimeout(function() { run(next); }, i);
+ this.offsetWidth; // force a repaint
+ run(next);
};
// Use jQuery's fx queue.
From 9e414f148801e59dd415e955748e0c2bcedeaa32 Mon Sep 17 00:00:00 2001
From: Matthew Lein
Date: Fri, 8 Jun 2012 19:41:21 -0400
Subject: [PATCH 02/89] Added Penner equations
---
jquery.transit.js | 36 ++++++++++++++++++++++++++++++------
1 file changed, 30 insertions(+), 6 deletions(-)
diff --git a/jquery.transit.js b/jquery.transit.js
index 6f810b1..3dfec2d 100644
--- a/jquery.transit.js
+++ b/jquery.transit.js
@@ -88,16 +88,40 @@
// ## $.cssEase
// List of easing aliases that you can use with `$.fn.transition`.
$.cssEase = {
- '_default': 'ease',
- 'in': 'ease-in',
- 'out': 'ease-out',
- 'in-out': 'ease-in-out',
- 'snap': 'cubic-bezier(0,1,.5,1)'
+ '_default': 'ease',
+ 'in': 'ease-in',
+ 'out': 'ease-out',
+ 'in-out': 'ease-in-out',
+ 'snap': 'cubic-bezier(0,1,.5,1)',
+ // Penner equations
+ 'easeOutCubic': 'cubic-bezier(.215,.61,.355,1)',
+ 'easeInOutCubic': 'cubic-bezier(.645,.045,.355,1)',
+ 'easeInCirc': 'cubic-bezier(.6,.04,.98,.335)',
+ 'easeOutCirc': 'cubic-bezier(.075,.82,.165,1)',
+ 'easeInOutCirc': 'cubic-bezier(.785,.135,.15,.86)',
+ 'easeInExpo': 'cubic-bezier(.95,.05,.795,.035)',
+ 'easeOutExpo': 'cubic-bezier(.19,1,.22,1)',
+ 'easeInOutExpo': 'cubic-bezier(1,0,0,1)',
+ 'easeInQuad': 'cubic-bezier(.55,.085,.68,.53)',
+ 'easeOutQuad': 'cubic-bezier(.25,.46,.45,.94)',
+ 'easeInOutQuad': 'cubic-bezier(.455,.03,.515,.955)',
+ 'easeInQuart': 'cubic-bezier(.895,.03,.685,.22)',
+ 'easeOutQuart': 'cubic-bezier(.165,.84,.44,1)',
+ 'easeInOutQuart': 'cubic-bezier(.77,0,.175,1)',
+ 'easeInQuint': 'cubic-bezier(.755,.05,.855,.06)',
+ 'easeOutQuint': 'cubic-bezier(.23,1,.32,1)',
+ 'easeInOutQuint': 'cubic-bezier(.86,0,.07,1)',
+ 'easeInSine': 'cubic-bezier(.47,0,.745,.715)',
+ 'easeOutSine': 'cubic-bezier(.39,.575,.565,1)',
+ 'easeInOutSine': 'cubic-bezier(.445,.05,.55,.95)',
+ 'easeInBack': 'cubic-bezier(.6,-.28,.735,.045)',
+ 'easeOutBack': 'cubic-bezier(.175, .885,.32,1.275)',
+ 'easeInOutBack': 'cubic-bezier(.68,-.55,.265,1.55)'
};
// ## 'transform' CSS hook
// Allows you to use the `transform` property in CSS.
- //
+ //
// $("#hello").css({ transform: "rotate(90deg)" });
//
// $("#hello").css('transform');
From d6a8379b97aee7cab4b65844fff7731688d5eeab Mon Sep 17 00:00:00 2001
From: Datrio
Date: Sun, 30 Sep 2012 15:43:56 +0300
Subject: [PATCH 03/89] fixes #76 - compatibility issue with jQuery 1.8
Fixing the problem with "Uncaught TypeError: Object none has no method 'setFromString'"
---
jquery.transit.js | 13 +++++++++++--
1 file changed, 11 insertions(+), 2 deletions(-)
diff --git a/jquery.transit.js b/jquery.transit.js
index 3ebae61..9e6e66a 100644
--- a/jquery.transit.js
+++ b/jquery.transit.js
@@ -603,12 +603,21 @@
$.cssHooks[prop] = {
get: function(elem) {
- var t = $(elem).css('transform') || new Transform();
+ var t = $(elem).css('transform');
+
+ if (!t || t === "none") {
+ t = new Transform();
+ }
return t.get(prop);
},
set: function(elem, value) {
- var t = $(elem).css('transform') || new Transform();
+ var t = $(elem).css('transform');
+
+ if (!t || t === "none") {
+ t = new Transform();
+ }
+
t.setFromString(prop, value);
$(elem).css({ transform: t });
From 5641cad804af8e8828542f8d9b6505c5ff22bb29 Mon Sep 17 00:00:00 2001
From: zhenglong
Date: Sun, 14 Oct 2012 08:59:34 +0800
Subject: [PATCH 04/89] fixes issue #82
---
jquery.transit.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/jquery.transit.js b/jquery.transit.js
index 3ebae61..830aeb2 100644
--- a/jquery.transit.js
+++ b/jquery.transit.js
@@ -106,7 +106,7 @@
$.cssHooks.transform = {
// The getter returns a `Transform` object.
get: function(elem) {
- return $(elem).data('transform');
+ return $(elem).data('transform') || new Transform();
},
// The setter accepts a `Transform` object or a string.
@@ -603,12 +603,12 @@
$.cssHooks[prop] = {
get: function(elem) {
- var t = $(elem).css('transform') || new Transform();
+ var t = $(elem).css('transform');
return t.get(prop);
},
set: function(elem, value) {
- var t = $(elem).css('transform') || new Transform();
+ var t = $(elem).css('transform');
t.setFromString(prop, value);
$(elem).css({ transform: t });
From bac6a5d6b78fb7bd02c681287ad42dde29c9812e Mon Sep 17 00:00:00 2001
From: Thomas Rosenau
Date: Thu, 6 Dec 2012 13:22:49 +0100
Subject: [PATCH 05/89] Added prefix-free transitionEnd event
---
jquery.transit.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/jquery.transit.js b/jquery.transit.js
index 9e6e66a..1968a8b 100644
--- a/jquery.transit.js
+++ b/jquery.transit.js
@@ -73,6 +73,7 @@
$.extend($.support, support);
var eventNames = {
+ 'transition': 'transitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'WebkitTransition': 'webkitTransitionEnd',
@@ -150,7 +151,7 @@
// ## 'transition' CSS hook
// Allows you to use the `transition` property in CSS.
//
- // $("#hello").css({ transition: 'all 0 ease 0' });
+ // $("#hello").css({ transition: 'all 0 ease 0' });
//
$.cssHooks.transition = {
get: function(elem) {
From 83a151444c0a8fcaf26e6726f519247969f7440a Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 02:52:16 +0800
Subject: [PATCH 06/89] Update site to jQuery 1.8. (yay!)
---
site/index.haml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/site/index.haml b/site/index.haml
index b4b0d63..daadef6 100644
--- a/site/index.haml
+++ b/site/index.haml
@@ -11,7 +11,7 @@ title: Hello
!= " "
!= " "
!= " "
- %script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js')
+ %script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js')
%script(src='jquery.transit.min.js')
%script(src='script.js')
- if ENV['ANALYTICS_ID']
From a3b3e4f36e5276725d26cbaa01b3bad26d33cef0 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 03:14:01 +0800
Subject: [PATCH 07/89] Remove 'use strict', since we're using
document/navigator/window inside the entire plugin.
---
jquery.transit.js | 2 --
1 file changed, 2 deletions(-)
diff --git a/jquery.transit.js b/jquery.transit.js
index 5f18093..c1bc608 100644
--- a/jquery.transit.js
+++ b/jquery.transit.js
@@ -8,8 +8,6 @@
*/
(function($) {
- "use strict";
-
$.transit = {
version: "0.1.3",
From 3cc3cbb9bd912f91b26d8d3c8921ee8f6bdc0449 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 03:34:32 +0800
Subject: [PATCH 08/89] Prefix the supposed-to-be-internal .css('transform') to
.css('transit:transform'). See #62.
---
jquery.transit.js | 16 ++++++++++++----
1 file changed, 12 insertions(+), 4 deletions(-)
diff --git a/jquery.transit.js b/jquery.transit.js
index c1bc608..f12dbf8 100644
--- a/jquery.transit.js
+++ b/jquery.transit.js
@@ -102,7 +102,7 @@
// $("#hello").css('transform');
// //=> { rotate: '90deg' }
//
- $.cssHooks.transform = {
+ $.cssHooks['transit:transform'] = {
// The getter returns a `Transform` object.
get: function(elem) {
return $(elem).data('transform') || new Transform();
@@ -131,6 +131,13 @@
}
};
+ // Add a CSS hook for `.css({ transform: '...' })`.
+ // In jQuery 1.8+, this will intentionally override the default `transform`
+ // CSS hook so it'll play well with Transit. (see issue #62)
+ $.cssHooks.transform = {
+ set: $.cssHooks['transit:transform'].set
+ };
+
// ## 'transformOrigin' CSS hook
// Allows the use for `transformOrigin` to define where scaling and rotation
// is pivoted.
@@ -602,17 +609,18 @@
$.cssHooks[prop] = {
get: function(elem) {
- var t = $(elem).css('transform');
+ var t = $(elem).css('transit:transform');
return t.get(prop);
},
set: function(elem, value) {
- var t = $(elem).css('transform');
+ var t = $(elem).css('transit:transform');
t.setFromString(prop, value);
- $(elem).css({ transform: t });
+ $(elem).css({ 'transit:transform': t });
}
};
+
}
// ### uncamel(str)
From 630a503e0138e3bd54aa2fcc07292b0f0f008466 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 05:05:55 +0800
Subject: [PATCH 09/89] Deprecate test.haml.
---
site/test.haml | 843 -------------------------------------------------
1 file changed, 843 deletions(-)
delete mode 100644 site/test.haml
diff --git a/site/test.haml b/site/test.haml
deleted file mode 100644
index 440d413..0000000
--- a/site/test.haml
+++ /dev/null
@@ -1,843 +0,0 @@
-title: Hello
---
-!!! 5
-%html
- %head
- %title jQuery Transit - CSS3 animations for jQuery
- %link(rel='stylesheet' media='screen' type='text/css' href='style.css')
- %meta(name='description' content='Super-smooth CSS3 transformations and transitions for jQuery.')
- != ""
- %script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js')
- %script(src='jquery.transit.min.js')
- %script(src='script.js')
- :javascript
- jQuery.fn.bounceIn = function(callback) {
- return this.
- css({ scale: 0.9, opacity: 0 }).
- transit({ scale: 1.03, opacity: 1 }, 120, 'out').
- transit({ scale: 1.0 }, 200, 'in', callback);
- };
-
- jQuery.fn.bounceOut = function(callback) {
- return this.
- css({ opacity: 1 }).
- transit({ scale: 0.97, opacity: 0 }, 120, 'in', callback);
- };
-
- %body
- #all
- %hgroup#header
- %h1
- jQuery Transit tests
-
- -# ============================================================================
- %h2 Delay zero
-
- %article.mini
- .hover
- .code
- %h3 Delay zero
- %pre
- != "$('.box').transition({ x: 330, delay: 0 }).transition({ x: 0 });"
-
- .field{style: 'height: 53px'}
- .box{style: 'left: 10px; top: 10px; height: 30px;'}
-
- -# ============================================================================
- %h2 Callback tests
-
- %article.mini
- .hover
- .code
- %h3 2nd param
- %pre
- != "$('.box').transition({ x: 330 }, function() { $(this).html('OK'); } );"
-
- .field{style: 'height: 53px'}
- .box{style: 'left: 10px; top: 10px; height: 30px;'}
-
- %article.mini
- .hover
- .code
- %h3 3rd param
- %pre
- != "$('.box').transition({ x: 330 }, 500, function() { $(this).html('OK'); } );"
-
- .field{style: 'height: 53px'}
- .box{style: 'left: 10px; top: 10px; height: 30px;'}
-
- %article.mini
- .hover
- .code
- %h3 as 'complete'
- %pre
- != "$('.box').transition({ x: 330, complete: function() { $(this).html('OK'); } });"
-
- .field{style: 'height: 53px'}
- .box{style: 'left: 10px; top: 10px; height: 30px;'}
-
- -# ============================================================================
- %h2 Property cleanup test
-
- %article
- .hover
- .code
- %h3 Clean up transformations
- %pre
- != "$('.box')."
- %br<>
- != " transition({ x: '-200px' }, function() {"
- %br<>
- != " if ($(this).attr('style').indexOf('transition') > -1)"
- %br<>
- != " alert('fail');"
- %br<>
- != "});"
-
- .field{style: 'height: 150px; overflow: hidden;'}
- .box{style: 'left: 10px; top: 10px; width: 380px; height: 130px;'}
-
- -# ============================================================================
- %h2 Queue reliability
-
- %article.mini
- .hover
- .code
- %pre
- != "var $el = $('.box');"
- %br<>
- != "$el.css({ transitionOrigin: '50% 0' });"
- %br<>
- != "for (var i=0; i<30; ++i) { $el.transit({ perspective: 100, rotateX: (i%2==0)?40:-40 }, 200); }"
- %br<>
- != "$el.transit({ rotateX: 0 });"
-
- .field{style: 'height: 53px'}
- .box{style: 'left: 10px; top: 10px; height: 30px;'}
-
- -# ============================================================================
- %h2 Transitioning from one style to another
-
- %article
- .hover
- .code
- %h3 Transition with zero duration
- %pre
- != "$('.box')."
- %br<>
- != " transition({ x: '-200px' }, 0 )."
- %br<>
- != " transition({ x: 0 });"
-
- .field{style: 'height: 150px; overflow: hidden;'}
- .box{style: 'left: 10px; top: 10px; width: 380px; height: 130px;'}
-
- %article
- .hover
- .code
- %h3 Zero durations - should not flicker (1)
- %pre
- != "$('.box')."
- %br<>
- != " transition({ x: '-200px' }, 0 )."
- %br<>
- != " transition({ x: '-100px' }, 0 )."
- %br<>
- != " transition({ x: '40px' }, 0 )."
- %br<>
- != " transition({ x: 0 }, 0 );"
-
- .field{style: 'height: 150px; overflow: hidden;'}
- .box{style: 'left: 10px; top: 10px; width: 380px; height: 130px;'}
-
- %article
- .hover
- .code
- %h3 Zero durations with non-zeros - fails in WebKit
- %pre
- != "$('.box')."
- %br<>
- != " transition({ x: '-200px' }, 0 )."
- %br<>
- != " transition({ x: '0' }, 200 )."
- %br<>
- != " transition({ y: 10 }, 0 )."
- %br<>
- != " transition({ x: 200 }, 0 )."
- %br<>
- != " transition({ x: 0 }, 200 )."
- %br<>
- != " transition({ y: 0 }, 0 );"
-
- .field{style: 'height: 150px; overflow: hidden;'}
- .box{style: 'left: 10px; top: 10px; width: 380px; height: 130px;'}
-
- %article
- .hover
- .code
- %h3 Zero durations with non-zeros -- baseline
- %pre
- != "$('.box')."
- %br<>
- != " animate({ left: -200 }, 0 )."
- %br<>
- != " animate({ left: 10 }, 200 )."
- %br<>
- != " animate({ top: 20 }, 0 )."
- %br<>
- != " animate({ left: 200 }, 0 )."
- %br<>
- != " animate({ left: 10 }, 200 )."
- %br<>
- != " animate({ top: 10 }, 0 );"
-
- .field{style: 'height: 150px; overflow: hidden;'}
- .box{style: 'left: 10px; top: 10px; width: 380px; height: 130px;'}
-
- %article
- .hover
- .code
- %h3 Transition with CSS
- %pre
- != "$('.box')."
- %br<>
- != " css({ x: '-200px' })."
- %br<>
- != " transition({ x: 0 });"
-
- .field{style: 'height: 150px; overflow: hidden;'}
- .box{style: 'left: 10px; top: 10px; width: 380px; height: 130px;'}
-
- -# ============================================================================
- %h2 Lingering test
-
- %article
- .hover
- .code
- %h3 Don't animate 'left'
- %pre
- != "$('.box')."
- %br<>
- != " css({ position: 'absolute', left: '500px', opacity: 0 }, 0 );"
- %br<>
- != "window.setTimeout(function() {"
- %br<>
- != " $('.box')."
- %br<>
- != " css({ left: 10 })."
- %br<>
- != " transition({ opacity: 1 });"
- %br<>
- != "}, 200);"
-
- .field{style: 'height: 150px; overflow: hidden;'}
- .box{style: 'left: 10px; top: 10px; width: 380px; height: 130px;'}
-
- -# ============================================================================
- %h2 Bounce?
-
- %article
- .hover
- .code
- %h3 In
- %pre
- != "$('.box').bounceIn();"
-
- .field
- .box{style: 'left: 180px; top: 20px;'}
-
- -# ============================================================================
- %h2 Translate (move)
-
- %article
- .hover
- .code
- %h3 Translate X
- %pre
- != "$('.box').transition({ x: '90px' });"
-
- .field
- .box{style: 'left: 10px; top: 10px;'}
-
- %article
- .hover
- .code
- %h3 Translate Y
- %pre
- != "$('.box').transition({ y: '30px' });"
-
- .field
- .box{style: 'left: 10px; top: 10px;'}
-
- %article
- .hover
- .code
- %h3 Translate X and Y
- %pre
- != "$('.box').transition({ x: '200px', y: '20px' });"
-
- .field
- .box{style: 'left: 10px; top: 10px;'}
-
- -# ============================================================================
- %h2 Rotation
-
- %article
- .hover
- .code
- %h3 Rotate
- %pre
- != "$('.box').transition({ rotate: '30deg' });"
-
- .field
- .box{style: 'left: 180px; top: 20px;'}
-
- -# ============================================================================
- %h2 Skew
-
- %article
- .hover
- .code
- %h3 Skew X
- %pre
- != "$('.box').transition({ skewX: '30deg' });"
-
- .field
- .box{style: 'left: 180px; top: 20px;'}
-
- %article
- .hover
- .code
- %h3 Skew Y
- %pre
- != "$('.box').transition({ skewY: '30deg' });"
-
- .field
- .box{style: 'left: 180px; top: 20px;'}
-
- %article
- .hover
- .code
- %h3 Skew X and Y
- %pre
- != "$('.box').transition({"
- %br<>
- != " skewX: '30deg', "
- %br<>
- != " skewY: '-30deg' "
- %br<>
- != "});"
-
- .field{style: 'height: 150px'}
- .box{style: 'left: 180px; top: 45px;'}
-
- -# ============================================================================
- %h2 Scale
-
- %article
- .hover
- .code
- %h3 Scale up 120% size
- %pre
- != "$('.box').transition({ scale: 1.2 });"
-
- .field
- .box{style: 'left: 180px; top: 20px;'}
-
- %article
- .hover
- .code
- %h3 Scale 200% horizontally, 150% vertically
- %pre
- != "$('.box').transition({ scale: [2, 1.5] });"
-
- .field
- .box{style: 'left: 180px; top: 25px;'}
-
- -# ============================================================================
- %h2 3D rotation (Webkit only)
-
- %article
- .hover
- .code
- %h3 Rotate X
- %pre
- != "$('.box').transition({"
- %br<>
- != " perspective: '100px', "
- %br<>
- != " rotateX: '180deg' "
- %br<>
- != "});"
-
- .field
- .box{style: 'left: 180px; top: 20px;'}
-
- %article
- .hover
- .code
- %h3 Rotate Y
- %pre
- != "$('.box').transition({"
- %br<>
- != " perspective: '100px', "
- %br<>
- != " rotateY: '180deg' "
- %br<>
- != "});"
-
- .field
- .box{style: 'left: 180px; top: 20px;'}
-
- %article
- .hover
- .code
- %h3 Rotate 3D
- %pre
- != "$('.box').transition({"
- %br<>
- != " perspective: '100px', "
- %br<>
- != " rotate3d: '1, 1, 0, 180deg' "
- %br<>
- != "});"
-
- .field
- .box{style: 'left: 180px; top: 20px;'}
-
- -# ============================================================================
- %h2 Transitions for other properties
-
- %article
- .hover
- .code
- %h3 $.fn.transition for any CSS property
- %pre
- != "$('.box').transition({"
- %br<>
- != " opacity: 0, "
- %br<>
- != " scale: 1.6"
- %br<>
- != "});"
-
- .field{style: 'height: 150px'}
- .box{style: 'left: 180px; top: 45px;'}
-
- %article
- .hover
- .code
- %pre
- != "$('.box').transition({"
- %br<>
- != " marginLeft: '20px', "
- %br<>
- != " height: '80px' "
- %br<>
- != "});"
-
- .field{style: 'height: 130px'}
- .box{style: 'left: 180px; top: 35px;'}
-
- -# ============================================================================
- %h2 Callbacks
-
- %article
- .hover
- .code
- %h3 Providing callbacks
- %pre
- != "$('.box').transition({ x: -100 }, function() { "
- %br<>
- != " $(this).transition({ opacity: 0 }); "
- %br<>
- != "} );"
-
- .field{style: 'height: 150px'}
- .box{style: 'left: 180px; top: 45px;'}
-
- -# ============================================================================
- %h2 Custom duration
-
- %article
- .hover
- .code
- %h3 Custom duration (jQuery style)
- %pre
- != "$('.box').transition({ opacity: 0 }, 'slow' );"
-
- .field{style: 'height: 150px'}
- .box{style: 'left: 180px; top: 45px;'}
-
- %article
- .hover
- .code
- %h3 Custom duration (in milliseconds)
- %pre
- != "$('.box').transition({ opacity: 0 }, 2000 );"
-
- .field{style: 'height: 150px'}
- .box{style: 'left: 180px; top: 45px;'}
-
- -# ============================================================================
- %h2 Easing
-
- %article.mini
- .hover
- .code
- %h3 Linear
- %pre
- != "$('.box').transition({ x: 330 }, 500, 'linear' );"
-
- .field{style: 'height: 53px'}
- .box{style: 'left: 10px; top: 10px; height: 30px;'}
-
- %article.mini
- .hover
- .code
- %h3 Ease in
- %pre
- != "$('.box').transition({ x: 330 }, 500, 'in' );"
-
- .field{style: 'height: 53px'}
- .box{style: 'left: 10px; top: 10px; height: 30px;'}
-
- %article.mini
- .hover
- .code
- %h3 Ease
- %pre
- != "$('.box').transition({ x: 330 }, 500, 'ease' );"
-
- .field{style: 'height: 53px'}
- .box{style: 'left: 10px; top: 10px; height: 30px;'}
-
- %article.mini
- .hover
- .code
- %h3 Ease out
- %pre
- != "$('.box').transition({ x: 330 }, 500, 'out' );"
-
- .field{style: 'height: 53px'}
- .box{style: 'left: 10px; top: 10px; height: 30px;'}
-
- %article.mini
- .hover
- .code
- %h3 Ease in-out
- %pre
- != "$('.box').transition({ x: 330 }, 500, 'in-out' );"
-
- .field{style: 'height: 53px'}
- .box{style: 'left: 10px; top: 10px; height: 30px;'}
-
- %article.mini
- .hover
- .code
- %h3 Snap
- %pre
- != "$('.box').transition({ x: 330 }, 500, 'snap' );"
-
- .field{style: 'height: 53px'}
- .box{style: 'left: 10px; top: 10px; height: 30px;'}
-
- %article.mini.last
- .hover
- .code
- %h3 Custom
- %pre
- != "$('.box').transition({ x: 330 }, 500, 'cubic-bezier(0,0.9,0.3,1)' );"
-
- .field{style: 'height: 53px'}
- .box{style: 'left: 10px; top: 10px; height: 30px;'}
-
- -# ============================================================================
- %h2 Delay
-
- %article
- .hover
- .code
- %h3 Delay by 400ms
- %pre
- != "$('.box').transition({ x: -100, delay: 400 });"
-
- .field{style: 'height: 150px'}
- .box{style: 'left: 180px; top: 45px;'}
-
- -# ============================================================================
- %h2 Alternate easing/duration syntax
-
- %article
- .hover
- .code
- %pre
- != "$('.box').transition({"
- %br<>
- != " x: '100px',"
- %br<>
- != " easing: 'snap', "
- %br<>
- != " duration: '2000ms' "
- %br<>
- != "});"
-
- .field{style: 'height: 150px'}
- .box{style: 'left: 180px; top: 45px;'}
-
- -# ============================================================================
- %h2 Optional units
-
- %article
- .hover
- .code
- %pre
- != "$('.box').transition({"
- %br<>
- != " x: 100 ,"
- %br<>
- != " duration: 2000 ,"
- %br<>
- != " rotate: 30 ,"
- %br<>
- != " easing: 'snap'"
- %br<>
- != "});"
-
- .field{style: 'height: 150px'}
- .box{style: 'left: 180px; top: 45px;'}
-
- -# ============================================================================
- %h2 Relative units
-
- %article
- .hover
- .code
- %pre
- != "$('.box').transition({"
- %br<>
- != " rotate: '+=30deg' ,"
- %br<>
- != " x: '+=30' "
- %br<>
- != "});"
-
- .field{style: 'height: 150px'}
- .box{style: 'left: 180px; top: 45px;'}
-
-
- -# ============================================================================
- %h2 $.fn.css
-
- %article
- .hover
- .code
- %pre
- != "$('.box').css({ "
- %br<>
- != " x: '90px' ,"
- %br<>
- != " y: '10px' ,"
- %br<>
- != " rotate: '-10deg' "
- %br<>
- != "} );"
-
- .field{style: 'height: 150px'}
- .box{style: 'left: 10px; top: 10px'}
-
- %article
- .hover
- .code
- %h3 Transform (automatically adds vendor prefixes)
- %pre
- != "$('.box').css({ transform: 'rotate(40deg)' });"
-
- .field
- .box{style: 'left: 10px; top: 10px;'}
-
- %article
- .code
- %h3 Getting values
- %pre
- != "$('.box').css({ rotate: '40deg' });"
- %br<>
- != "alert($('.box').css('rotate') );"
- %br<>
- != "alert($('.box').css('transform') );"
- %button Run
-
- .field{style: 'height: 150px'}
- .box{style: 'left: 10px; top: 10px;'}
-
- -# ============================================================================
- %h2 Setting transform origins
-
- %article
- .hover
- .code
- %pre
- != "$('.box').css({ transformOrigin: '10px 10px' });"
- %br<>
- != "$('.box').transition({ rotate: 40, scale: 1.2 });"
-
- .field
- .box{style: 'left: 10px; top: 10px;'}
-
- -# ============================================================================
- %h2 Effect queue
-
- %article
- .hover
- .code
- %pre
- != "$('.box')."
- %br<>
- != " transition({ x: '-40px' }, 250)."
- %br<>
- != " transition({ x: '0px' }, 250)."
- %br<>
- != " transition({ y: '-40px' }, 250)."
- %br<>
- != " transition({ y: '0px' }, 250);"
-
- .field{style: 'height: 150px; overflow: hidden;'}
- .box{style: 'left: 180px; top: 45px;'}
-
- :javascript
- // Super simple test framework.
- var T = {
- test: null,
- alerted: false,
-
- run: function(tests) {
- var self = this;
-
- for (test in tests) {
- if (tests.hasOwnProperty(test)) {
- if (test.charAt(0) == '_') continue;
- var fn = tests[test];
- var obj = {};
- if (tests._setup) tests._setup.apply(obj);
- fn.apply(obj, [ function(val) { self.assert(val, test, this); } ]);
- }
- }
- },
-
- assert: function(value, test, T) {
- if (!value) {
- console.error(test, "- Assertion failed.");
- console.trace();
- if (!T.alerted) alert("An assertion failed. See the console for details.");
- }
- }
- };
-
- function getTransition(el) {
- return el.style[$.support.transition];
- }
-
- function uncamel(str) {
- return str.replace(/([A-Z])/g, function(letter) { return '-' + letter.toLowerCase(); })
- }
-
- // Tests yo
- T.run({
- _setup: function() {
- this.div = $("");
- },
-
- get_rotate: function(a) {
- a(this.div.css('rotate') == 0);
- },
-
- set_and_get_rotate: function(a) {
- this.div.css('rotate', 30);
- a(this.div.css('rotate') == '30deg');
- },
-
- set_and_get_rotate_radian: function(a) {
- this.div.css('rotate', '30rad');
- a(this.div.css('rotate') == '30rad');
- },
-
- translate: function(a) {
- this.div.css('x', 30);
- this.div.css('y', 40);
-
- a(this.div.css('x') == '30px');
- a(this.div.css('y') == '40px');
- a(this.div.css('translate') == ['30px','40px']);
- },
-
- array_args: function(a) {
- this.div.css('translate', [300, 400]);
- a(this.div.css('translate') == ['300px','400px']);
- },
-
- array_args_2: function(a) {
- this.div.css('translate', ['300', '400']);
- a(this.div.css('translate') == ['300px','400px']);
- },
-
- array_args_3: function(a) {
- this.div.css('translate', ['300em', '400em']);
- a(this.div.css('translate') == ['300em','400em']);
- },
-
- scale_1: function(a) {
- this.div.css('scale', [2,3]);
- var s = this.div.css('scale');
-
- a(s.length == 2);
- a(s[0] == 2);
- a(s[1] == 3);
- },
-
- scale_2: function(a) {
- this.div.css('scale', [2.5, 2.5]);
- a(this.div.css('scale') == 2.5);
- },
-
- transform_object: function(a) {
- this.div.css('x', '40px');
- this.div.css('y', '90px');
- this.div.css('rotate', 400);
-
- var t = this.div.css('transform');
- a(t.toString() == 'translate(40px,90px) rotate(400deg)');
- a(t.toString(true) == 'translate3d(40px,90px,0) rotate(400deg)');
- a(t.rotate === '400deg');
- a(t.translate === '40px,90px');
- },
-
- callback: function(a) {
- var div = $("
").appendTo($("body"));
- var x = 1;
- div.transition({ x: -40 }, 400, function() {
- x = 2;
- });
-
- window.setTimeout(function() {
- a(x == 2);
- }, 1600);
- },
-
- transition_property: function(a) {
- var div = $("
").appendTo($("body"));
- div.transition({ left: 40, marginLeft: 10, rotate: 30 }, 400, 'ease');
- window.setTimeout(function() {
- var t = getTransition(div[0]);
- a(t.indexOf('left 400ms ease') > -1);
- a(t.indexOf('margin 400ms ease') > -1);
- a(t.indexOf(uncamel($.support.transform) + ' 400ms ease') > -1);
- }, 200);
- },
-
- get_transition_value: function(a) {
- var t = $.transit.getTransitionValue({ opacity: 0, skewX: 30 }, 500, 'in');
- a(t.indexOf('opacity 500ms ease-in') > -1);
- a(t.indexOf(uncamel($.support.transform) + ' 500ms ease-in') > -1);
- }
-
- });
From 7f29f6c6c5743c52662ff2b2780cc5ba58e3209c Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 05:06:02 +0800
Subject: [PATCH 10/89] Add shiny new test 'framework'. Hooray!!
---
test/index.html | 228 ++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 228 insertions(+)
create mode 100644 test/index.html
diff --git a/test/index.html b/test/index.html
new file mode 100644
index 0000000..d77cbc6
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,228 @@
+
+
+
+
+ jQuery Transit tests
+
+
+
+
+
+
+
+
+
+
+
+
jQuery transit tests
+
+
Since there's no reliable programmatic way to test for transitions, this
+ is a simple page set up so you can visually inspect effects
+ conveniently.
+
+
+
+
+
+
From aa395b4a6ad836f34d66880c67ccaafea4e5ce90 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 05:13:11 +0800
Subject: [PATCH 11/89] Use unprefixed properties if available.
---
jquery.transit.js | 3 +++
1 file changed, 3 insertions(+)
diff --git a/jquery.transit.js b/jquery.transit.js
index f12dbf8..17dc247 100644
--- a/jquery.transit.js
+++ b/jquery.transit.js
@@ -37,6 +37,9 @@
// Helper function to get the proper vendor property name.
// (`transition` => `WebkitTransition`)
function getVendorPropertyName(prop) {
+ // Handle unprefixed versions (FF16+, for example)
+ if (prop in div.style) return prop;
+
var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1);
From e7b761145129911399d1c81a7196a79c2e359432 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 05:27:29 +0800
Subject: [PATCH 12/89] Update HISTORY.md.
---
HISTORY.md | 19 +++++++++++++++++++
1 file changed, 19 insertions(+)
diff --git a/HISTORY.md b/HISTORY.md
index 11a06b4..8200ae5 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -1,3 +1,20 @@
+v1.0.0 - Dec 14, 2012
+---------------------
+
+Many, many thanks to the many [contributors] who made this release happen!
+
+### Fixes:
+
+ * Fix support for jQuery 1.8, IE 10, Firefox 16. (#93, #82, #85, #81, #76, #77, #70, #92)
+ * Unprefixed CSS properties are now used if your browser supports them.
+ * Account for prefix-free transition end for Mozilla. (#97)
+ * Callbacks should now be called even if duration is `0`. (#37)
+
+### Internal fixes:
+
+ * New test suite.
+ * In building the website, use `fl-rocco` instead of `docco`. This removes the dependency. (#50)
+
v0.1.3 - Feb 14, 2012
---------------------
@@ -45,3 +62,5 @@ v0.1.0 - Nov 14, 2011
---------------------
Initial official release.
+
+[contributors]: https://github.com/rstacruz/jquery.transit/contributors
From 985e282766fa6649885639d3d224a4d098f8ec9e Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 05:30:17 +0800
Subject: [PATCH 13/89] In jQuery 1.8+, let jQuery handle the prefixing of
transformOrigin and transition.
---
jquery.transit.js | 62 +++++++++++++++++++++++++----------------------
1 file changed, 33 insertions(+), 29 deletions(-)
diff --git a/jquery.transit.js b/jquery.transit.js
index 17dc247..511639e 100644
--- a/jquery.transit.js
+++ b/jquery.transit.js
@@ -1,6 +1,6 @@
/*!
* jQuery Transit - CSS3 transitions and transformations
- * Copyright(c) 2011 Rico Sta. Cruz
+ * Copyright(c) 2011-12 Rico Sta. Cruz
* MIT Licensed.
*
* http://ricostacruz.com/jquery.transit
@@ -9,7 +9,7 @@
(function($) {
$.transit = {
- version: "0.1.3",
+ version: "1.0.0",
// Map of $.css() keys to values for 'transitionProperty'.
// See https://developer.mozilla.org/en/CSS/CSS_transitions#Properties_that_can_be_animated
@@ -141,34 +141,38 @@
set: $.cssHooks['transit:transform'].set
};
- // ## 'transformOrigin' CSS hook
- // Allows the use for `transformOrigin` to define where scaling and rotation
- // is pivoted.
- //
- // $("#hello").css({ transformOrigin: '0 0' });
- //
- $.cssHooks.transformOrigin = {
- get: function(elem) {
- return elem.style[support.transformOrigin];
- },
- set: function(elem, value) {
- elem.style[support.transformOrigin] = value;
- }
- };
+ // jQuery 1.8+ supports prefix-free transitions, so these polyfills will not
+ // be necessary.
+ if ($.fn.jquery < "1.8") {
+ // ## 'transformOrigin' CSS hook
+ // Allows the use for `transformOrigin` to define where scaling and rotation
+ // is pivoted.
+ //
+ // $("#hello").css({ transformOrigin: '0 0' });
+ //
+ $.cssHooks.transformOrigin = {
+ get: function(elem) {
+ return elem.style[support.transformOrigin];
+ },
+ set: function(elem, value) {
+ elem.style[support.transformOrigin] = value;
+ }
+ };
- // ## 'transition' CSS hook
- // Allows you to use the `transition` property in CSS.
- //
- // $("#hello").css({ transition: 'all 0 ease 0' });
- //
- $.cssHooks.transition = {
- get: function(elem) {
- return elem.style[support.transition];
- },
- set: function(elem, value) {
- elem.style[support.transition] = value;
- }
- };
+ // ## 'transition' CSS hook
+ // Allows you to use the `transition` property in CSS.
+ //
+ // $("#hello").css({ transition: 'all 0 ease 0' });
+ //
+ $.cssHooks.transition = {
+ get: function(elem) {
+ return elem.style[support.transition];
+ },
+ set: function(elem, value) {
+ elem.style[support.transition] = value;
+ }
+ };
+ }
// ## Other CSS hooks
// Allows you to rotate, scale and translate.
From 97ef30fd7f016a314dbf2d0ba23939a9e2ba9bbd Mon Sep 17 00:00:00 2001
From: Aleks Totic
Date: Fri, 12 Oct 2012 11:34:41 -0700
Subject: [PATCH 14/89] 2 bugfixes for transform syntax
---
jquery.transit.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/jquery.transit.js b/jquery.transit.js
index 511639e..2486818 100644
--- a/jquery.transit.js
+++ b/jquery.transit.js
@@ -323,8 +323,8 @@
if (this._translateX === undefined) { this._translateX = 0; }
if (this._translateY === undefined) { this._translateY = 0; }
- if (x !== null) { this._translateX = unit(x, 'px'); }
- if (y !== null) { this._translateY = unit(y, 'px'); }
+ if (x !== null && x !== undefined) { this._translateX = unit(x, 'px'); }
+ if (y !== null && y !== undefined) { this._translateY = unit(y, 'px'); }
this.translate = this._translateX + "," + this._translateY;
}
@@ -418,7 +418,7 @@
$.each(props, function(key) {
key = $.camelCase(key); // Convert "text-align" => "textAlign"
- key = $.transit.propertyMap[key] || key;
+ key = $.transit.propertyMap[key] || $.cssProps[key] || key;
key = uncamel(key); // Convert back to dasherized
if ($.inArray(key, re) === -1) { re.push(key); }
From d24f35c691b3e14624bc2f211b2e7e9e11bb4192 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 05:58:57 +0800
Subject: [PATCH 15/89] Update HISTORY.md.
---
HISTORY.md | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/HISTORY.md b/HISTORY.md
index 8200ae5..a850c4b 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -3,12 +3,14 @@ v1.0.0 - Dec 14, 2012
Many, many thanks to the many [contributors] who made this release happen!
-### Fixes:
+### Fixes and additions:
* Fix support for jQuery 1.8, IE 10, Firefox 16. (#93, #82, #85, #81, #76, #77, #70, #92)
* Unprefixed CSS properties are now used if your browser supports them.
* Account for prefix-free transition end for Mozilla. (#97)
* Callbacks should now be called even if duration is `0`. (#37)
+ * Doing `.css('transition', 'transform 1s')` should now properly vendor-prefix 'transform'. (#84)
+ * Added Penner easing splines. (#44)
### Internal fixes:
From d54cf12bfaec669be3d2d7e6b36ae7a6ce8f0b89 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 06:13:03 +0800
Subject: [PATCH 16/89] Don't override jQuery.support for properties that have
already been set. Fixes Bootstrap. (#67)
---
jquery.transit.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/jquery.transit.js b/jquery.transit.js
index 646b540..c568f72 100644
--- a/jquery.transit.js
+++ b/jquery.transit.js
@@ -62,16 +62,16 @@
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
// Check for the browser's transitions support.
- // You can access this in jQuery's `$.support.transition`.
- // As per [jQuery's cssHooks documentation](http://api.jquery.com/jQuery.cssHooks/),
- // we set $.support.transition to a string of the actual property name used.
support.transition = getVendorPropertyName('transition');
support.transitionDelay = getVendorPropertyName('transitionDelay');
support.transform = getVendorPropertyName('transform');
support.transformOrigin = getVendorPropertyName('transformOrigin');
support.transform3d = checkTransform3dSupport();
- $.extend($.support, support);
+ // Populate jQuery's `$.support` with the vendor prefixes we know.
+ // As per [jQuery's cssHooks documentation](http://api.jquery.com/jQuery.cssHooks/),
+ // we set $.support.transition to a string of the actual property name used.
+ $.support = $.extend({}, support, $.support);
var eventNames = {
'transition': 'transitionEnd',
From ebe9b01f87c104fa077c30a7cc6d04e82cf8eacf Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 06:13:34 +0800
Subject: [PATCH 17/89] Update HISTORY.md.
---
HISTORY.md | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/HISTORY.md b/HISTORY.md
index a850c4b..baa37c6 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -5,7 +5,9 @@ Many, many thanks to the many [contributors] who made this release happen!
### Fixes and additions:
- * Fix support for jQuery 1.8, IE 10, Firefox 16. (#93, #82, #85, #81, #76, #77, #70, #92)
+ * Fix support for jQuery 1.8, IE 10, Firefox 16, Android Jellybean.
+ (#48, ,#70, #71, #76, #77, #80, #81, #82, #85, #90, #92, #93)
+ * Compatibility with Twitter Bootstrap has been fixed. (#67)
* Unprefixed CSS properties are now used if your browser supports them.
* Account for prefix-free transition end for Mozilla. (#97)
* Callbacks should now be called even if duration is `0`. (#37)
From 0a615bb18376c3c1454d33bc526dc24376901752 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 06:16:23 +0800
Subject: [PATCH 18/89] Eh, rewrite the $.support propagation to be less
destructive. #67
---
jquery.transit.js | 14 +++++++++-----
1 file changed, 9 insertions(+), 5 deletions(-)
diff --git a/jquery.transit.js b/jquery.transit.js
index c568f72..6233023 100644
--- a/jquery.transit.js
+++ b/jquery.transit.js
@@ -68,11 +68,6 @@
support.transformOrigin = getVendorPropertyName('transformOrigin');
support.transform3d = checkTransform3dSupport();
- // Populate jQuery's `$.support` with the vendor prefixes we know.
- // As per [jQuery's cssHooks documentation](http://api.jquery.com/jQuery.cssHooks/),
- // we set $.support.transition to a string of the actual property name used.
- $.support = $.extend({}, support, $.support);
-
var eventNames = {
'transition': 'transitionEnd',
'MozTransition': 'transitionend',
@@ -84,6 +79,15 @@
// Detect the 'transitionend' event needed.
var transitionEnd = support.transitionEnd = eventNames[support.transition] || null;
+ // Populate jQuery's `$.support` with the vendor prefixes we know.
+ // As per [jQuery's cssHooks documentation](http://api.jquery.com/jQuery.cssHooks/),
+ // we set $.support.transition to a string of the actual property name used.
+ for (var key in support) {
+ if (support.hasOwnProperty(key) && typeof $.support[key] === 'undefined') {
+ $.support[key] = support[key];
+ }
+ }
+
// Avoid memory leak in IE.
div = null;
From 5d5eb7681249c17887122369225052d6158ac741 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 06:20:08 +0800
Subject: [PATCH 19/89] Update documents.
---
HISTORY.md | 2 +-
README.md | 9 +++------
2 files changed, 4 insertions(+), 7 deletions(-)
diff --git a/HISTORY.md b/HISTORY.md
index baa37c6..d66ab28 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -6,7 +6,7 @@ Many, many thanks to the many [contributors] who made this release happen!
### Fixes and additions:
* Fix support for jQuery 1.8, IE 10, Firefox 16, Android Jellybean.
- (#48, ,#70, #71, #76, #77, #80, #81, #82, #85, #90, #92, #93)
+ (#48, #62, #63, #70, #71, #76, #77, #80, #81, #82, #85, #90, #92, #93)
* Compatibility with Twitter Bootstrap has been fixed. (#67)
* Unprefixed CSS properties are now used if your browser supports them.
* Account for prefix-free transition end for Mozilla. (#97)
diff --git a/README.md b/README.md
index 4a99b1a..a771eec 100644
--- a/README.md
+++ b/README.md
@@ -98,12 +98,9 @@ $("#box").transition({
Tests
-----
-Since you can't easily programatically test transitions, you'll need to build
-the site, open the test suite in your browser, and visually inspect if all
-transitions work as they should.
-
-Build the site using `rake build`, then open `site/_output/test.html`. This
-builds the minified JS and tests it.
+Transit has a unique test suite. Open `test/index.html` to see it. When
+contibuting fixes, be sure to test this out with different jQuery versions and
+different browsers.
Alternatives
------------
From 8231ed1af5ab877a17aaabc71c1b7a487889fa3e Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Fri, 14 Dec 2012 06:27:49 +0800
Subject: [PATCH 20/89] 0.9.9.
---
HISTORY.md | 5 +-
jquery.transit.js | 4 +-
site/jquery.transit-0.9.9.js | 700 +++++++++++++++++++++++++++++++
site/jquery.transit-0.9.9.min.js | 22 +
4 files changed, 727 insertions(+), 4 deletions(-)
create mode 100644 site/jquery.transit-0.9.9.js
create mode 100644 site/jquery.transit-0.9.9.min.js
diff --git a/HISTORY.md b/HISTORY.md
index d66ab28..d9d9920 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -1,7 +1,8 @@
-v1.0.0 - Dec 14, 2012
+v0.9.9 - Dec 14, 2012
---------------------
-Many, many thanks to the many [contributors] who made this release happen!
+Many, many thanks to the many [contributors] who made this release happen! This
+is a pre-release of 1.0.
### Fixes and additions:
diff --git a/jquery.transit.js b/jquery.transit.js
index 6233023..f0d9719 100644
--- a/jquery.transit.js
+++ b/jquery.transit.js
@@ -1,6 +1,6 @@
/*!
* jQuery Transit - CSS3 transitions and transformations
- * Copyright(c) 2011-12 Rico Sta. Cruz
+ * (c) 2011-2012 Rico Sta. Cruz
* MIT Licensed.
*
* http://ricostacruz.com/jquery.transit
@@ -9,7 +9,7 @@
(function($) {
$.transit = {
- version: "1.0.0",
+ version: "0.9.9",
// Map of $.css() keys to values for 'transitionProperty'.
// See https://developer.mozilla.org/en/CSS/CSS_transitions#Properties_that_can_be_animated
diff --git a/site/jquery.transit-0.9.9.js b/site/jquery.transit-0.9.9.js
new file mode 100644
index 0000000..f0d9719
--- /dev/null
+++ b/site/jquery.transit-0.9.9.js
@@ -0,0 +1,700 @@
+/*!
+ * jQuery Transit - CSS3 transitions and transformations
+ * (c) 2011-2012 Rico Sta. Cruz
+ * MIT Licensed.
+ *
+ * http://ricostacruz.com/jquery.transit
+ * http://github.com/rstacruz/jquery.transit
+ */
+
+(function($) {
+ $.transit = {
+ version: "0.9.9",
+
+ // Map of $.css() keys to values for 'transitionProperty'.
+ // See https://developer.mozilla.org/en/CSS/CSS_transitions#Properties_that_can_be_animated
+ propertyMap: {
+ marginLeft : 'margin',
+ marginRight : 'margin',
+ marginBottom : 'margin',
+ marginTop : 'margin',
+ paddingLeft : 'padding',
+ paddingRight : 'padding',
+ paddingBottom : 'padding',
+ paddingTop : 'padding'
+ },
+
+ // Will simply transition "instantly" if false
+ enabled: true,
+
+ // Set this to false if you don't want to use the transition end property.
+ useTransitionEnd: false
+ };
+
+ var div = document.createElement('div');
+ var support = {};
+
+ // Helper function to get the proper vendor property name.
+ // (`transition` => `WebkitTransition`)
+ function getVendorPropertyName(prop) {
+ // Handle unprefixed versions (FF16+, for example)
+ if (prop in div.style) return prop;
+
+ var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
+ var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1);
+
+ if (prop in div.style) { return prop; }
+
+ for (var i=0; i -1;
+
+ // Check for the browser's transitions support.
+ support.transition = getVendorPropertyName('transition');
+ support.transitionDelay = getVendorPropertyName('transitionDelay');
+ support.transform = getVendorPropertyName('transform');
+ support.transformOrigin = getVendorPropertyName('transformOrigin');
+ support.transform3d = checkTransform3dSupport();
+
+ var eventNames = {
+ 'transition': 'transitionEnd',
+ 'MozTransition': 'transitionend',
+ 'OTransition': 'oTransitionEnd',
+ 'WebkitTransition': 'webkitTransitionEnd',
+ 'msTransition': 'MSTransitionEnd'
+ };
+
+ // Detect the 'transitionend' event needed.
+ var transitionEnd = support.transitionEnd = eventNames[support.transition] || null;
+
+ // Populate jQuery's `$.support` with the vendor prefixes we know.
+ // As per [jQuery's cssHooks documentation](http://api.jquery.com/jQuery.cssHooks/),
+ // we set $.support.transition to a string of the actual property name used.
+ for (var key in support) {
+ if (support.hasOwnProperty(key) && typeof $.support[key] === 'undefined') {
+ $.support[key] = support[key];
+ }
+ }
+
+ // Avoid memory leak in IE.
+ div = null;
+
+ // ## $.cssEase
+ // List of easing aliases that you can use with `$.fn.transition`.
+ $.cssEase = {
+ '_default': 'ease',
+ 'in': 'ease-in',
+ 'out': 'ease-out',
+ 'in-out': 'ease-in-out',
+ 'snap': 'cubic-bezier(0,1,.5,1)',
+ // Penner equations
+ 'easeOutCubic': 'cubic-bezier(.215,.61,.355,1)',
+ 'easeInOutCubic': 'cubic-bezier(.645,.045,.355,1)',
+ 'easeInCirc': 'cubic-bezier(.6,.04,.98,.335)',
+ 'easeOutCirc': 'cubic-bezier(.075,.82,.165,1)',
+ 'easeInOutCirc': 'cubic-bezier(.785,.135,.15,.86)',
+ 'easeInExpo': 'cubic-bezier(.95,.05,.795,.035)',
+ 'easeOutExpo': 'cubic-bezier(.19,1,.22,1)',
+ 'easeInOutExpo': 'cubic-bezier(1,0,0,1)',
+ 'easeInQuad': 'cubic-bezier(.55,.085,.68,.53)',
+ 'easeOutQuad': 'cubic-bezier(.25,.46,.45,.94)',
+ 'easeInOutQuad': 'cubic-bezier(.455,.03,.515,.955)',
+ 'easeInQuart': 'cubic-bezier(.895,.03,.685,.22)',
+ 'easeOutQuart': 'cubic-bezier(.165,.84,.44,1)',
+ 'easeInOutQuart': 'cubic-bezier(.77,0,.175,1)',
+ 'easeInQuint': 'cubic-bezier(.755,.05,.855,.06)',
+ 'easeOutQuint': 'cubic-bezier(.23,1,.32,1)',
+ 'easeInOutQuint': 'cubic-bezier(.86,0,.07,1)',
+ 'easeInSine': 'cubic-bezier(.47,0,.745,.715)',
+ 'easeOutSine': 'cubic-bezier(.39,.575,.565,1)',
+ 'easeInOutSine': 'cubic-bezier(.445,.05,.55,.95)',
+ 'easeInBack': 'cubic-bezier(.6,-.28,.735,.045)',
+ 'easeOutBack': 'cubic-bezier(.175, .885,.32,1.275)',
+ 'easeInOutBack': 'cubic-bezier(.68,-.55,.265,1.55)'
+ };
+
+ // ## 'transform' CSS hook
+ // Allows you to use the `transform` property in CSS.
+ //
+ // $("#hello").css({ transform: "rotate(90deg)" });
+ //
+ // $("#hello").css('transform');
+ // //=> { rotate: '90deg' }
+ //
+ $.cssHooks['transit:transform'] = {
+ // The getter returns a `Transform` object.
+ get: function(elem) {
+ return $(elem).data('transform') || new Transform();
+ },
+
+ // The setter accepts a `Transform` object or a string.
+ set: function(elem, v) {
+ var value = v;
+
+ if (!(value instanceof Transform)) {
+ value = new Transform(value);
+ }
+
+ // We've seen the 3D version of Scale() not work in Chrome when the
+ // element being scaled extends outside of the viewport. Thus, we're
+ // forcing Chrome to not use the 3d transforms as well. Not sure if
+ // translate is affectede, but not risking it. Detection code from
+ // http://davidwalsh.name/detecting-google-chrome-javascript
+ if (support.transform === 'WebkitTransform' && !isChrome) {
+ elem.style[support.transform] = value.toString(true);
+ } else {
+ elem.style[support.transform] = value.toString();
+ }
+
+ $(elem).data('transform', value);
+ }
+ };
+
+ // Add a CSS hook for `.css({ transform: '...' })`.
+ // In jQuery 1.8+, this will intentionally override the default `transform`
+ // CSS hook so it'll play well with Transit. (see issue #62)
+ $.cssHooks.transform = {
+ set: $.cssHooks['transit:transform'].set
+ };
+
+ // jQuery 1.8+ supports prefix-free transitions, so these polyfills will not
+ // be necessary.
+ if ($.fn.jquery < "1.8") {
+ // ## 'transformOrigin' CSS hook
+ // Allows the use for `transformOrigin` to define where scaling and rotation
+ // is pivoted.
+ //
+ // $("#hello").css({ transformOrigin: '0 0' });
+ //
+ $.cssHooks.transformOrigin = {
+ get: function(elem) {
+ return elem.style[support.transformOrigin];
+ },
+ set: function(elem, value) {
+ elem.style[support.transformOrigin] = value;
+ }
+ };
+
+ // ## 'transition' CSS hook
+ // Allows you to use the `transition` property in CSS.
+ //
+ // $("#hello").css({ transition: 'all 0 ease 0' });
+ //
+ $.cssHooks.transition = {
+ get: function(elem) {
+ return elem.style[support.transition];
+ },
+ set: function(elem, value) {
+ elem.style[support.transition] = value;
+ }
+ };
+ }
+
+ // ## Other CSS hooks
+ // Allows you to rotate, scale and translate.
+ registerCssHook('scale');
+ registerCssHook('translate');
+ registerCssHook('rotate');
+ registerCssHook('rotateX');
+ registerCssHook('rotateY');
+ registerCssHook('rotate3d');
+ registerCssHook('perspective');
+ registerCssHook('skewX');
+ registerCssHook('skewY');
+ registerCssHook('x', true);
+ registerCssHook('y', true);
+
+ // ## Transform class
+ // This is the main class of a transformation property that powers
+ // `$.fn.css({ transform: '...' })`.
+ //
+ // This is, in essence, a dictionary object with key/values as `-transform`
+ // properties.
+ //
+ // var t = new Transform("rotate(90) scale(4)");
+ //
+ // t.rotate //=> "90deg"
+ // t.scale //=> "4,4"
+ //
+ // Setters are accounted for.
+ //
+ // t.set('rotate', 4)
+ // t.rotate //=> "4deg"
+ //
+ // Convert it to a CSS string using the `toString()` and `toString(true)` (for WebKit)
+ // functions.
+ //
+ // t.toString() //=> "rotate(90deg) scale(4,4)"
+ // t.toString(true) //=> "rotate(90deg) scale3d(4,4,0)" (WebKit version)
+ //
+ function Transform(str) {
+ if (typeof str === 'string') { this.parse(str); }
+ return this;
+ }
+
+ Transform.prototype = {
+ // ### setFromString()
+ // Sets a property from a string.
+ //
+ // t.setFromString('scale', '2,4');
+ // // Same as set('scale', '2', '4');
+ //
+ setFromString: function(prop, val) {
+ var args =
+ (typeof val === 'string') ? val.split(',') :
+ (val.constructor === Array) ? val :
+ [ val ];
+
+ args.unshift(prop);
+
+ Transform.prototype.set.apply(this, args);
+ },
+
+ // ### set()
+ // Sets a property.
+ //
+ // t.set('scale', 2, 4);
+ //
+ set: function(prop) {
+ var args = Array.prototype.slice.apply(arguments, [1]);
+ if (this.setter[prop]) {
+ this.setter[prop].apply(this, args);
+ } else {
+ this[prop] = args.join(',');
+ }
+ },
+
+ get: function(prop) {
+ if (this.getter[prop]) {
+ return this.getter[prop].apply(this);
+ } else {
+ return this[prop] || 0;
+ }
+ },
+
+ setter: {
+ // ### rotate
+ //
+ // .css({ rotate: 30 })
+ // .css({ rotate: "30" })
+ // .css({ rotate: "30deg" })
+ // .css({ rotate: "30deg" })
+ //
+ rotate: function(theta) {
+ this.rotate = unit(theta, 'deg');
+ },
+
+ rotateX: function(theta) {
+ this.rotateX = unit(theta, 'deg');
+ },
+
+ rotateY: function(theta) {
+ this.rotateY = unit(theta, 'deg');
+ },
+
+ // ### scale
+ //
+ // .css({ scale: 9 }) //=> "scale(9,9)"
+ // .css({ scale: '3,2' }) //=> "scale(3,2)"
+ //
+ scale: function(x, y) {
+ if (y === undefined) { y = x; }
+ this.scale = x + "," + y;
+ },
+
+ // ### skewX + skewY
+ skewX: function(x) {
+ this.skewX = unit(x, 'deg');
+ },
+
+ skewY: function(y) {
+ this.skewY = unit(y, 'deg');
+ },
+
+ // ### perspectvie
+ perspective: function(dist) {
+ this.perspective = unit(dist, 'px');
+ },
+
+ // ### x / y
+ // Translations. Notice how this keeps the other value.
+ //
+ // .css({ x: 4 }) //=> "translate(4px, 0)"
+ // .css({ y: 10 }) //=> "translate(4px, 10px)"
+ //
+ x: function(x) {
+ this.set('translate', x, null);
+ },
+
+ y: function(y) {
+ this.set('translate', null, y);
+ },
+
+ // ### translate
+ // Notice how this keeps the other value.
+ //
+ // .css({ translate: '2, 5' }) //=> "translate(2px, 5px)"
+ //
+ translate: function(x, y) {
+ if (this._translateX === undefined) { this._translateX = 0; }
+ if (this._translateY === undefined) { this._translateY = 0; }
+
+ if (x !== null && x !== undefined) { this._translateX = unit(x, 'px'); }
+ if (y !== null && y !== undefined) { this._translateY = unit(y, 'px'); }
+
+ this.translate = this._translateX + "," + this._translateY;
+ }
+ },
+
+ getter: {
+ x: function() {
+ return this._translateX || 0;
+ },
+
+ y: function() {
+ return this._translateY || 0;
+ },
+
+ scale: function() {
+ var s = (this.scale || "1,1").split(',');
+ if (s[0]) { s[0] = parseFloat(s[0]); }
+ if (s[1]) { s[1] = parseFloat(s[1]); }
+
+ // "2.5,2.5" => 2.5
+ // "2.5,1" => [2.5,1]
+ return (s[0] === s[1]) ? s[0] : s;
+ },
+
+ rotate3d: function() {
+ var s = (this.rotate3d || "0,0,0,0deg").split(',');
+ for (var i=0; i<=3; ++i) {
+ if (s[i]) { s[i] = parseFloat(s[i]); }
+ }
+ if (s[3]) { s[3] = unit(s[3], 'deg'); }
+
+ return s;
+ }
+ },
+
+ // ### parse()
+ // Parses from a string. Called on constructor.
+ parse: function(str) {
+ var self = this;
+ str.replace(/([a-zA-Z0-9]+)\((.*?)\)/g, function(x, prop, val) {
+ self.setFromString(prop, val);
+ });
+ },
+
+ // ### toString()
+ // Converts to a `transition` CSS property string. If `use3d` is given,
+ // it converts to a `-webkit-transition` CSS property string instead.
+ toString: function(use3d) {
+ var re = [];
+
+ for (var i in this) {
+ if (this.hasOwnProperty(i)) {
+ // Don't use 3D transformations if the browser can't support it.
+ if ((!support.transform3d) && (
+ (i === 'rotateX') ||
+ (i === 'rotateY') ||
+ (i === 'perspective') ||
+ (i === 'transformOrigin'))) { continue; }
+
+ if (i[0] !== '_') {
+ if (use3d && (i === 'scale')) {
+ re.push(i + "3d(" + this[i] + ",1)");
+ } else if (use3d && (i === 'translate')) {
+ re.push(i + "3d(" + this[i] + ",0)");
+ } else {
+ re.push(i + "(" + this[i] + ")");
+ }
+ }
+ }
+ }
+
+ return re.join(" ");
+ }
+ };
+
+ function callOrQueue(self, queue, fn) {
+ if (queue === true) {
+ self.queue(fn);
+ } else if (queue) {
+ self.queue(queue, fn);
+ } else {
+ fn();
+ }
+ }
+
+ // ### getProperties(dict)
+ // Returns properties (for `transition-property`) for dictionary `props`. The
+ // value of `props` is what you would expect in `$.css(...)`.
+ function getProperties(props) {
+ var re = [];
+
+ $.each(props, function(key) {
+ key = $.camelCase(key); // Convert "text-align" => "textAlign"
+ key = $.transit.propertyMap[key] || $.cssProps[key] || key;
+ key = uncamel(key); // Convert back to dasherized
+
+ if ($.inArray(key, re) === -1) { re.push(key); }
+ });
+
+ return re;
+ }
+
+ // ### getTransition()
+ // Returns the transition string to be used for the `transition` CSS property.
+ //
+ // Example:
+ //
+ // getTransition({ opacity: 1, rotate: 30 }, 500, 'ease');
+ // //=> 'opacity 500ms ease, -webkit-transform 500ms ease'
+ //
+ function getTransition(properties, duration, easing, delay) {
+ // Get the CSS properties needed.
+ var props = getProperties(properties);
+
+ // Account for aliases (`in` => `ease-in`).
+ if ($.cssEase[easing]) { easing = $.cssEase[easing]; }
+
+ // Build the duration/easing/delay attributes for it.
+ var attribs = '' + toMS(duration) + ' ' + easing;
+ if (parseInt(delay, 10) > 0) { attribs += ' ' + toMS(delay); }
+
+ // For more properties, add them this way:
+ // "margin 200ms ease, padding 200ms ease, ..."
+ var transitions = [];
+ $.each(props, function(i, name) {
+ transitions.push(name + ' ' + attribs);
+ });
+
+ return transitions.join(', ');
+ }
+
+ // ## $.fn.transition
+ // Works like $.fn.animate(), but uses CSS transitions.
+ //
+ // $("...").transition({ opacity: 0.1, scale: 0.3 });
+ //
+ // // Specific duration
+ // $("...").transition({ opacity: 0.1, scale: 0.3 }, 500);
+ //
+ // // With duration and easing
+ // $("...").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');
+ //
+ // // With callback
+ // $("...").transition({ opacity: 0.1, scale: 0.3 }, function() { ... });
+ //
+ // // With everything
+ // $("...").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() { ... });
+ //
+ // // Alternate syntax
+ // $("...").transition({
+ // opacity: 0.1,
+ // duration: 200,
+ // delay: 40,
+ // easing: 'in',
+ // complete: function() { /* ... */ }
+ // });
+ //
+ $.fn.transition = $.fn.transit = function(properties, duration, easing, callback) {
+ var self = this;
+ var delay = 0;
+ var queue = true;
+
+ // Account for `.transition(properties, callback)`.
+ if (typeof duration === 'function') {
+ callback = duration;
+ duration = undefined;
+ }
+
+ // Account for `.transition(properties, duration, callback)`.
+ if (typeof easing === 'function') {
+ callback = easing;
+ easing = undefined;
+ }
+
+ // Alternate syntax.
+ if (typeof properties.easing !== 'undefined') {
+ easing = properties.easing;
+ delete properties.easing;
+ }
+
+ if (typeof properties.duration !== 'undefined') {
+ duration = properties.duration;
+ delete properties.duration;
+ }
+
+ if (typeof properties.complete !== 'undefined') {
+ callback = properties.complete;
+ delete properties.complete;
+ }
+
+ if (typeof properties.queue !== 'undefined') {
+ queue = properties.queue;
+ delete properties.queue;
+ }
+
+ if (typeof properties.delay !== 'undefined') {
+ delay = properties.delay;
+ delete properties.delay;
+ }
+
+ // Set defaults. (`400` duration, `ease` easing)
+ if (typeof duration === 'undefined') { duration = $.fx.speeds._default; }
+ if (typeof easing === 'undefined') { easing = $.cssEase._default; }
+
+ duration = toMS(duration);
+
+ // Build the `transition` property.
+ var transitionValue = getTransition(properties, duration, easing, delay);
+
+ // Compute delay until callback.
+ // If this becomes 0, don't bother setting the transition property.
+ var work = $.transit.enabled && support.transition;
+ var i = work ? (parseInt(duration, 10) + parseInt(delay, 10)) : 0;
+
+ // If there's nothing to do...
+ if (i === 0) {
+ var fn = function(next) {
+ self.css(properties);
+ if (callback) { callback.apply(self); }
+ if (next) { next(); }
+ };
+
+ callOrQueue(self, queue, fn);
+ return self;
+ }
+
+ // Save the old transitions of each element so we can restore it later.
+ var oldTransitions = {};
+
+ var run = function(nextCall) {
+ var bound = false;
+
+ // Prepare the callback.
+ var cb = function() {
+ if (bound) { self.unbind(transitionEnd, cb); }
+
+ if (i > 0) {
+ self.each(function() {
+ this.style[support.transition] = (oldTransitions[this] || null);
+ });
+ }
+
+ if (typeof callback === 'function') { callback.apply(self); }
+ if (typeof nextCall === 'function') { nextCall(); }
+ };
+
+ if ((i > 0) && (transitionEnd) && ($.transit.useTransitionEnd)) {
+ // Use the 'transitionend' event if it's available.
+ bound = true;
+ self.bind(transitionEnd, cb);
+ } else {
+ // Fallback to timers if the 'transitionend' event isn't supported.
+ window.setTimeout(cb, i);
+ }
+
+ // Apply transitions.
+ self.each(function() {
+ if (i > 0) {
+ this.style[support.transition] = transitionValue;
+ }
+ $(this).css(properties);
+ });
+ };
+
+ // Defer running. This allows the browser to paint any pending CSS it hasn't
+ // painted yet before doing the transitions.
+ var deferredRun = function(next) {
+ var i = 0;
+
+ // Durations that are too slow will get transitions mixed up.
+ // (Tested on Mac/FF 7.0.1)
+ if ((support.transition === 'MozTransition') && (i < 25)) { i = 25; }
+
+ window.setTimeout(function() { run(next); }, i);
+ };
+
+ // Use jQuery's fx queue.
+ callOrQueue(self, queue, deferredRun);
+
+ // Chainability.
+ return this;
+ };
+
+ function registerCssHook(prop, isPixels) {
+ // For certain properties, the 'px' should not be implied.
+ if (!isPixels) { $.cssNumber[prop] = true; }
+
+ $.transit.propertyMap[prop] = support.transform;
+
+ $.cssHooks[prop] = {
+ get: function(elem) {
+ var t = $(elem).css('transit:transform');
+ return t.get(prop);
+ },
+
+ set: function(elem, value) {
+ var t = $(elem).css('transit:transform');
+ t.setFromString(prop, value);
+
+ $(elem).css({ 'transit:transform': t });
+ }
+ };
+
+ }
+
+ // ### uncamel(str)
+ // Converts a camelcase string to a dasherized string.
+ // (`marginLeft` => `margin-left`)
+ function uncamel(str) {
+ return str.replace(/([A-Z])/g, function(letter) { return '-' + letter.toLowerCase(); });
+ }
+
+ // ### unit(number, unit)
+ // Ensures that number `number` has a unit. If no unit is found, assume the
+ // default is `unit`.
+ //
+ // unit(2, 'px') //=> "2px"
+ // unit("30deg", 'rad') //=> "30deg"
+ //
+ function unit(i, units) {
+ if ((typeof i === "string") && (!i.match(/^[\-0-9\.]+$/))) {
+ return i;
+ } else {
+ return "" + i + units;
+ }
+ }
+
+ // ### toMS(duration)
+ // Converts given `duration` to a millisecond string.
+ //
+ // toMS('fast') //=> '400ms'
+ // toMS(10) //=> '10ms'
+ //
+ function toMS(duration) {
+ var i = duration;
+
+ // Allow for string durations like 'fast'.
+ if ($.fx.speeds[i]) { i = $.fx.speeds[i]; }
+
+ return unit(i, 'ms');
+ }
+
+ // Export some functions for testable-ness.
+ $.transit.getTransitionValue = getTransition;
+})(jQuery);
diff --git a/site/jquery.transit-0.9.9.min.js b/site/jquery.transit-0.9.9.min.js
new file mode 100644
index 0000000..7dc4056
--- /dev/null
+++ b/site/jquery.transit-0.9.9.min.js
@@ -0,0 +1,22 @@
+/*!
+ * jQuery Transit - CSS3 transitions and transformations
+ * (c) 2011-2012 Rico Sta. Cruz
+ * MIT Licensed.
+ *
+ * http://ricostacruz.com/jquery.transit
+ * http://github.com/rstacruz/jquery.transit
+ */
+(function(d){function m(a){if(a in j.style)return a;var b=["Moz","Webkit","O","ms"],c=a.charAt(0).toUpperCase()+a.substr(1);if(a in j.style)return a;for(a=0;ad.fn.jquery&&(d.cssHooks.transformOrigin={get:function(a){return a.style[e.transformOrigin]},set:function(a,b){a.style[e.transformOrigin]=b}},d.cssHooks.transition={get:function(a){return a.style[e.transition]},set:function(a,b){a.style[e.transition]=b}});f("scale");
+f("translate");f("rotate");f("rotateX");f("rotateY");f("rotate3d");f("perspective");f("skewX");f("skewY");f("x",!0);f("y",!0);l.prototype={setFromString:function(a,b){var c="string"===typeof b?b.split(","):b.constructor===Array?b:[b];c.unshift(a);l.prototype.set.apply(this,c)},set:function(a){var b=Array.prototype.slice.apply(arguments,[1]);this.setter[a]?this.setter[a].apply(this,b):this[a]=b.join(",")},get:function(a){return this.getter[a]?this.getter[a].apply(this):this[a]||0},setter:{rotate:function(a){this.rotate=
+g(a,"deg")},rotateX:function(a){this.rotateX=g(a,"deg")},rotateY:function(a){this.rotateY=g(a,"deg")},scale:function(a,b){void 0===b&&(b=a);this.scale=a+","+b},skewX:function(a){this.skewX=g(a,"deg")},skewY:function(a){this.skewY=g(a,"deg")},perspective:function(a){this.perspective=g(a,"px")},x:function(a){this.set("translate",a,null)},y:function(a){this.set("translate",null,a)},translate:function(a,b){void 0===this._translateX&&(this._translateX=0);void 0===this._translateY&&(this._translateY=0);
+null!==a&&void 0!==a&&(this._translateX=g(a,"px"));null!==b&&void 0!==b&&(this._translateY=g(b,"px"));this.translate=this._translateX+","+this._translateY}},getter:{x:function(){return this._translateX||0},y:function(){return this._translateY||0},scale:function(){var a=(this.scale||"1,1").split(",");a[0]&&(a[0]=parseFloat(a[0]));a[1]&&(a[1]=parseFloat(a[1]));return a[0]===a[1]?a[0]:a},rotate3d:function(){for(var a=(this.rotate3d||"0,0,0,0deg").split(","),b=0;3>=b;++b)a[b]&&(a[b]=parseFloat(a[b]));
+a[3]&&(a[3]=g(a[3],"deg"));return a}},parse:function(a){var b=this;a.replace(/([a-zA-Z0-9]+)\((.*?)\)/g,function(a,d,e){b.setFromString(d,e)})},toString:function(a){var b=[],c;for(c in this)if(this.hasOwnProperty(c)&&(e.transform3d||!("rotateX"===c||"rotateY"===c||"perspective"===c||"transformOrigin"===c)))"_"!==c[0]&&(a&&"scale"===c?b.push(c+"3d("+this[c]+",1)"):a&&"translate"===c?b.push(c+"3d("+this[c]+",0)"):b.push(c+"("+this[c]+")"));return b.join(" ")}};d.fn.transition=d.fn.transit=function(a,
+b,c,f){var h=this,g=0,j=!0;"function"===typeof b&&(f=b,b=void 0);"function"===typeof c&&(f=c,c=void 0);"undefined"!==typeof a.easing&&(c=a.easing,delete a.easing);"undefined"!==typeof a.duration&&(b=a.duration,delete a.duration);"undefined"!==typeof a.complete&&(f=a.complete,delete a.complete);"undefined"!==typeof a.queue&&(j=a.queue,delete a.queue);"undefined"!==typeof a.delay&&(g=a.delay,delete a.delay);"undefined"===typeof b&&(b=d.fx.speeds._default);"undefined"===typeof c&&(c=d.cssEase._default);
+b=n(b);var l=q(a,b,c,g),k=d.transit.enabled&&e.transition?parseInt(b,10)+parseInt(g,10):0;if(0===k)return b=j,c=function(b){h.css(a);f&&f.apply(h);b&&b()},!0===b?h.queue(c):b?h.queue(b,c):c(),h;var m={};b=j;c=function(b){var c=0;"MozTransition"===e.transition&&25>c&&(c=25);window.setTimeout(function(){var c=!1,g=function(){c&&h.unbind(p,g);0
Date: Sun, 16 Dec 2012 01:41:38 +0800
Subject: [PATCH 21/89] Add the new experimental site.
---
site/s2/index.html | 229 +++++++++++++
site/s2/jquery.transit.js | 700 ++++++++++++++++++++++++++++++++++++++
site/s2/script.js | 39 +++
site/s2/style.css | 408 ++++++++++++++++++++++
4 files changed, 1376 insertions(+)
create mode 100644 site/s2/index.html
create mode 100644 site/s2/jquery.transit.js
create mode 100644 site/s2/script.js
create mode 100644 site/s2/style.css
diff --git a/site/s2/index.html b/site/s2/index.html
new file mode 100644
index 0000000..7cf6edf
--- /dev/null
+++ b/site/s2/index.html
@@ -0,0 +1,229 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Upgrading notes
+ Upgrading from an older version? Transit should be mostly backward-compatible.
+ See the change log for notes.
+
+
+
+ Development version
+ You may also download the development
+ version which has spaces and comments preserved.
+ Curious to see how it's made? See the annotated source code !
+
+
+
+
+
+
Transformations
+
Hover to see it work.
+
+
+
+
+
+
+
Translate X
+
+
+
$('.box').transition({ x: '40px' });
+
+
+
+
+
+
+
Translate Y
+
+
+
$('.box').transition({ y: '40px' });
+
+
+
+
+
+
+
Translate X/Y
+
+
+
$('.box').transition({ x: '40px', y: '40px' });
+
+
+
+
+
+
+
+
More transformations
+
+
+
+
+
+
+
Rotate
+
+
+
$('.box').transition({ rotate: '45deg' });
+
+
+
+
+
+
+
Scale
+
+
+
$('.box').transition({ scale: 2.2 });
+
+
+
+
+
+
+
Scale independently
+
+
+
$('.box').transition({ scale: [2.0, 1.5] });
+
+
+
+
+
+
+
Skew X
+
+
+
$('.box').transition({ skewX: '30deg' });
+
+
+
+
+
+
+
Skew Y
+
+
+
$('.box').transition({ skewY: '30deg' });
+
+
+
+
+
+
+
+
3D transformations
+
You may rotate using rotateX and rotateY.
+ Using perspective is optional, but it should always come
+ before rotateX/Y. Try it in Firefox 10+ or Webkit browsers!
+
+
+
+
+
+
+
Rotate X
+
+
+
$('.box').transition({ perspective: '100px', rotateX: '180deg' });
+
+
+
+
+
+
+
Rotate Y
+
+
+
$('.box').transition({ perspective: '100px', rotateY: '180deg' });
+
+
+
+
+
+
+
Rotate 3D
+
+
+
$('.box').transition({ perspective: '100px', rotate3d: '1,1,0,180deg' });
+
+
+
+
+
+
+
+
diff --git a/site/s2/jquery.transit.js b/site/s2/jquery.transit.js
new file mode 100644
index 0000000..f0d9719
--- /dev/null
+++ b/site/s2/jquery.transit.js
@@ -0,0 +1,700 @@
+/*!
+ * jQuery Transit - CSS3 transitions and transformations
+ * (c) 2011-2012 Rico Sta. Cruz
+ * MIT Licensed.
+ *
+ * http://ricostacruz.com/jquery.transit
+ * http://github.com/rstacruz/jquery.transit
+ */
+
+(function($) {
+ $.transit = {
+ version: "0.9.9",
+
+ // Map of $.css() keys to values for 'transitionProperty'.
+ // See https://developer.mozilla.org/en/CSS/CSS_transitions#Properties_that_can_be_animated
+ propertyMap: {
+ marginLeft : 'margin',
+ marginRight : 'margin',
+ marginBottom : 'margin',
+ marginTop : 'margin',
+ paddingLeft : 'padding',
+ paddingRight : 'padding',
+ paddingBottom : 'padding',
+ paddingTop : 'padding'
+ },
+
+ // Will simply transition "instantly" if false
+ enabled: true,
+
+ // Set this to false if you don't want to use the transition end property.
+ useTransitionEnd: false
+ };
+
+ var div = document.createElement('div');
+ var support = {};
+
+ // Helper function to get the proper vendor property name.
+ // (`transition` => `WebkitTransition`)
+ function getVendorPropertyName(prop) {
+ // Handle unprefixed versions (FF16+, for example)
+ if (prop in div.style) return prop;
+
+ var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
+ var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1);
+
+ if (prop in div.style) { return prop; }
+
+ for (var i=0; i -1;
+
+ // Check for the browser's transitions support.
+ support.transition = getVendorPropertyName('transition');
+ support.transitionDelay = getVendorPropertyName('transitionDelay');
+ support.transform = getVendorPropertyName('transform');
+ support.transformOrigin = getVendorPropertyName('transformOrigin');
+ support.transform3d = checkTransform3dSupport();
+
+ var eventNames = {
+ 'transition': 'transitionEnd',
+ 'MozTransition': 'transitionend',
+ 'OTransition': 'oTransitionEnd',
+ 'WebkitTransition': 'webkitTransitionEnd',
+ 'msTransition': 'MSTransitionEnd'
+ };
+
+ // Detect the 'transitionend' event needed.
+ var transitionEnd = support.transitionEnd = eventNames[support.transition] || null;
+
+ // Populate jQuery's `$.support` with the vendor prefixes we know.
+ // As per [jQuery's cssHooks documentation](http://api.jquery.com/jQuery.cssHooks/),
+ // we set $.support.transition to a string of the actual property name used.
+ for (var key in support) {
+ if (support.hasOwnProperty(key) && typeof $.support[key] === 'undefined') {
+ $.support[key] = support[key];
+ }
+ }
+
+ // Avoid memory leak in IE.
+ div = null;
+
+ // ## $.cssEase
+ // List of easing aliases that you can use with `$.fn.transition`.
+ $.cssEase = {
+ '_default': 'ease',
+ 'in': 'ease-in',
+ 'out': 'ease-out',
+ 'in-out': 'ease-in-out',
+ 'snap': 'cubic-bezier(0,1,.5,1)',
+ // Penner equations
+ 'easeOutCubic': 'cubic-bezier(.215,.61,.355,1)',
+ 'easeInOutCubic': 'cubic-bezier(.645,.045,.355,1)',
+ 'easeInCirc': 'cubic-bezier(.6,.04,.98,.335)',
+ 'easeOutCirc': 'cubic-bezier(.075,.82,.165,1)',
+ 'easeInOutCirc': 'cubic-bezier(.785,.135,.15,.86)',
+ 'easeInExpo': 'cubic-bezier(.95,.05,.795,.035)',
+ 'easeOutExpo': 'cubic-bezier(.19,1,.22,1)',
+ 'easeInOutExpo': 'cubic-bezier(1,0,0,1)',
+ 'easeInQuad': 'cubic-bezier(.55,.085,.68,.53)',
+ 'easeOutQuad': 'cubic-bezier(.25,.46,.45,.94)',
+ 'easeInOutQuad': 'cubic-bezier(.455,.03,.515,.955)',
+ 'easeInQuart': 'cubic-bezier(.895,.03,.685,.22)',
+ 'easeOutQuart': 'cubic-bezier(.165,.84,.44,1)',
+ 'easeInOutQuart': 'cubic-bezier(.77,0,.175,1)',
+ 'easeInQuint': 'cubic-bezier(.755,.05,.855,.06)',
+ 'easeOutQuint': 'cubic-bezier(.23,1,.32,1)',
+ 'easeInOutQuint': 'cubic-bezier(.86,0,.07,1)',
+ 'easeInSine': 'cubic-bezier(.47,0,.745,.715)',
+ 'easeOutSine': 'cubic-bezier(.39,.575,.565,1)',
+ 'easeInOutSine': 'cubic-bezier(.445,.05,.55,.95)',
+ 'easeInBack': 'cubic-bezier(.6,-.28,.735,.045)',
+ 'easeOutBack': 'cubic-bezier(.175, .885,.32,1.275)',
+ 'easeInOutBack': 'cubic-bezier(.68,-.55,.265,1.55)'
+ };
+
+ // ## 'transform' CSS hook
+ // Allows you to use the `transform` property in CSS.
+ //
+ // $("#hello").css({ transform: "rotate(90deg)" });
+ //
+ // $("#hello").css('transform');
+ // //=> { rotate: '90deg' }
+ //
+ $.cssHooks['transit:transform'] = {
+ // The getter returns a `Transform` object.
+ get: function(elem) {
+ return $(elem).data('transform') || new Transform();
+ },
+
+ // The setter accepts a `Transform` object or a string.
+ set: function(elem, v) {
+ var value = v;
+
+ if (!(value instanceof Transform)) {
+ value = new Transform(value);
+ }
+
+ // We've seen the 3D version of Scale() not work in Chrome when the
+ // element being scaled extends outside of the viewport. Thus, we're
+ // forcing Chrome to not use the 3d transforms as well. Not sure if
+ // translate is affectede, but not risking it. Detection code from
+ // http://davidwalsh.name/detecting-google-chrome-javascript
+ if (support.transform === 'WebkitTransform' && !isChrome) {
+ elem.style[support.transform] = value.toString(true);
+ } else {
+ elem.style[support.transform] = value.toString();
+ }
+
+ $(elem).data('transform', value);
+ }
+ };
+
+ // Add a CSS hook for `.css({ transform: '...' })`.
+ // In jQuery 1.8+, this will intentionally override the default `transform`
+ // CSS hook so it'll play well with Transit. (see issue #62)
+ $.cssHooks.transform = {
+ set: $.cssHooks['transit:transform'].set
+ };
+
+ // jQuery 1.8+ supports prefix-free transitions, so these polyfills will not
+ // be necessary.
+ if ($.fn.jquery < "1.8") {
+ // ## 'transformOrigin' CSS hook
+ // Allows the use for `transformOrigin` to define where scaling and rotation
+ // is pivoted.
+ //
+ // $("#hello").css({ transformOrigin: '0 0' });
+ //
+ $.cssHooks.transformOrigin = {
+ get: function(elem) {
+ return elem.style[support.transformOrigin];
+ },
+ set: function(elem, value) {
+ elem.style[support.transformOrigin] = value;
+ }
+ };
+
+ // ## 'transition' CSS hook
+ // Allows you to use the `transition` property in CSS.
+ //
+ // $("#hello").css({ transition: 'all 0 ease 0' });
+ //
+ $.cssHooks.transition = {
+ get: function(elem) {
+ return elem.style[support.transition];
+ },
+ set: function(elem, value) {
+ elem.style[support.transition] = value;
+ }
+ };
+ }
+
+ // ## Other CSS hooks
+ // Allows you to rotate, scale and translate.
+ registerCssHook('scale');
+ registerCssHook('translate');
+ registerCssHook('rotate');
+ registerCssHook('rotateX');
+ registerCssHook('rotateY');
+ registerCssHook('rotate3d');
+ registerCssHook('perspective');
+ registerCssHook('skewX');
+ registerCssHook('skewY');
+ registerCssHook('x', true);
+ registerCssHook('y', true);
+
+ // ## Transform class
+ // This is the main class of a transformation property that powers
+ // `$.fn.css({ transform: '...' })`.
+ //
+ // This is, in essence, a dictionary object with key/values as `-transform`
+ // properties.
+ //
+ // var t = new Transform("rotate(90) scale(4)");
+ //
+ // t.rotate //=> "90deg"
+ // t.scale //=> "4,4"
+ //
+ // Setters are accounted for.
+ //
+ // t.set('rotate', 4)
+ // t.rotate //=> "4deg"
+ //
+ // Convert it to a CSS string using the `toString()` and `toString(true)` (for WebKit)
+ // functions.
+ //
+ // t.toString() //=> "rotate(90deg) scale(4,4)"
+ // t.toString(true) //=> "rotate(90deg) scale3d(4,4,0)" (WebKit version)
+ //
+ function Transform(str) {
+ if (typeof str === 'string') { this.parse(str); }
+ return this;
+ }
+
+ Transform.prototype = {
+ // ### setFromString()
+ // Sets a property from a string.
+ //
+ // t.setFromString('scale', '2,4');
+ // // Same as set('scale', '2', '4');
+ //
+ setFromString: function(prop, val) {
+ var args =
+ (typeof val === 'string') ? val.split(',') :
+ (val.constructor === Array) ? val :
+ [ val ];
+
+ args.unshift(prop);
+
+ Transform.prototype.set.apply(this, args);
+ },
+
+ // ### set()
+ // Sets a property.
+ //
+ // t.set('scale', 2, 4);
+ //
+ set: function(prop) {
+ var args = Array.prototype.slice.apply(arguments, [1]);
+ if (this.setter[prop]) {
+ this.setter[prop].apply(this, args);
+ } else {
+ this[prop] = args.join(',');
+ }
+ },
+
+ get: function(prop) {
+ if (this.getter[prop]) {
+ return this.getter[prop].apply(this);
+ } else {
+ return this[prop] || 0;
+ }
+ },
+
+ setter: {
+ // ### rotate
+ //
+ // .css({ rotate: 30 })
+ // .css({ rotate: "30" })
+ // .css({ rotate: "30deg" })
+ // .css({ rotate: "30deg" })
+ //
+ rotate: function(theta) {
+ this.rotate = unit(theta, 'deg');
+ },
+
+ rotateX: function(theta) {
+ this.rotateX = unit(theta, 'deg');
+ },
+
+ rotateY: function(theta) {
+ this.rotateY = unit(theta, 'deg');
+ },
+
+ // ### scale
+ //
+ // .css({ scale: 9 }) //=> "scale(9,9)"
+ // .css({ scale: '3,2' }) //=> "scale(3,2)"
+ //
+ scale: function(x, y) {
+ if (y === undefined) { y = x; }
+ this.scale = x + "," + y;
+ },
+
+ // ### skewX + skewY
+ skewX: function(x) {
+ this.skewX = unit(x, 'deg');
+ },
+
+ skewY: function(y) {
+ this.skewY = unit(y, 'deg');
+ },
+
+ // ### perspectvie
+ perspective: function(dist) {
+ this.perspective = unit(dist, 'px');
+ },
+
+ // ### x / y
+ // Translations. Notice how this keeps the other value.
+ //
+ // .css({ x: 4 }) //=> "translate(4px, 0)"
+ // .css({ y: 10 }) //=> "translate(4px, 10px)"
+ //
+ x: function(x) {
+ this.set('translate', x, null);
+ },
+
+ y: function(y) {
+ this.set('translate', null, y);
+ },
+
+ // ### translate
+ // Notice how this keeps the other value.
+ //
+ // .css({ translate: '2, 5' }) //=> "translate(2px, 5px)"
+ //
+ translate: function(x, y) {
+ if (this._translateX === undefined) { this._translateX = 0; }
+ if (this._translateY === undefined) { this._translateY = 0; }
+
+ if (x !== null && x !== undefined) { this._translateX = unit(x, 'px'); }
+ if (y !== null && y !== undefined) { this._translateY = unit(y, 'px'); }
+
+ this.translate = this._translateX + "," + this._translateY;
+ }
+ },
+
+ getter: {
+ x: function() {
+ return this._translateX || 0;
+ },
+
+ y: function() {
+ return this._translateY || 0;
+ },
+
+ scale: function() {
+ var s = (this.scale || "1,1").split(',');
+ if (s[0]) { s[0] = parseFloat(s[0]); }
+ if (s[1]) { s[1] = parseFloat(s[1]); }
+
+ // "2.5,2.5" => 2.5
+ // "2.5,1" => [2.5,1]
+ return (s[0] === s[1]) ? s[0] : s;
+ },
+
+ rotate3d: function() {
+ var s = (this.rotate3d || "0,0,0,0deg").split(',');
+ for (var i=0; i<=3; ++i) {
+ if (s[i]) { s[i] = parseFloat(s[i]); }
+ }
+ if (s[3]) { s[3] = unit(s[3], 'deg'); }
+
+ return s;
+ }
+ },
+
+ // ### parse()
+ // Parses from a string. Called on constructor.
+ parse: function(str) {
+ var self = this;
+ str.replace(/([a-zA-Z0-9]+)\((.*?)\)/g, function(x, prop, val) {
+ self.setFromString(prop, val);
+ });
+ },
+
+ // ### toString()
+ // Converts to a `transition` CSS property string. If `use3d` is given,
+ // it converts to a `-webkit-transition` CSS property string instead.
+ toString: function(use3d) {
+ var re = [];
+
+ for (var i in this) {
+ if (this.hasOwnProperty(i)) {
+ // Don't use 3D transformations if the browser can't support it.
+ if ((!support.transform3d) && (
+ (i === 'rotateX') ||
+ (i === 'rotateY') ||
+ (i === 'perspective') ||
+ (i === 'transformOrigin'))) { continue; }
+
+ if (i[0] !== '_') {
+ if (use3d && (i === 'scale')) {
+ re.push(i + "3d(" + this[i] + ",1)");
+ } else if (use3d && (i === 'translate')) {
+ re.push(i + "3d(" + this[i] + ",0)");
+ } else {
+ re.push(i + "(" + this[i] + ")");
+ }
+ }
+ }
+ }
+
+ return re.join(" ");
+ }
+ };
+
+ function callOrQueue(self, queue, fn) {
+ if (queue === true) {
+ self.queue(fn);
+ } else if (queue) {
+ self.queue(queue, fn);
+ } else {
+ fn();
+ }
+ }
+
+ // ### getProperties(dict)
+ // Returns properties (for `transition-property`) for dictionary `props`. The
+ // value of `props` is what you would expect in `$.css(...)`.
+ function getProperties(props) {
+ var re = [];
+
+ $.each(props, function(key) {
+ key = $.camelCase(key); // Convert "text-align" => "textAlign"
+ key = $.transit.propertyMap[key] || $.cssProps[key] || key;
+ key = uncamel(key); // Convert back to dasherized
+
+ if ($.inArray(key, re) === -1) { re.push(key); }
+ });
+
+ return re;
+ }
+
+ // ### getTransition()
+ // Returns the transition string to be used for the `transition` CSS property.
+ //
+ // Example:
+ //
+ // getTransition({ opacity: 1, rotate: 30 }, 500, 'ease');
+ // //=> 'opacity 500ms ease, -webkit-transform 500ms ease'
+ //
+ function getTransition(properties, duration, easing, delay) {
+ // Get the CSS properties needed.
+ var props = getProperties(properties);
+
+ // Account for aliases (`in` => `ease-in`).
+ if ($.cssEase[easing]) { easing = $.cssEase[easing]; }
+
+ // Build the duration/easing/delay attributes for it.
+ var attribs = '' + toMS(duration) + ' ' + easing;
+ if (parseInt(delay, 10) > 0) { attribs += ' ' + toMS(delay); }
+
+ // For more properties, add them this way:
+ // "margin 200ms ease, padding 200ms ease, ..."
+ var transitions = [];
+ $.each(props, function(i, name) {
+ transitions.push(name + ' ' + attribs);
+ });
+
+ return transitions.join(', ');
+ }
+
+ // ## $.fn.transition
+ // Works like $.fn.animate(), but uses CSS transitions.
+ //
+ // $("...").transition({ opacity: 0.1, scale: 0.3 });
+ //
+ // // Specific duration
+ // $("...").transition({ opacity: 0.1, scale: 0.3 }, 500);
+ //
+ // // With duration and easing
+ // $("...").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');
+ //
+ // // With callback
+ // $("...").transition({ opacity: 0.1, scale: 0.3 }, function() { ... });
+ //
+ // // With everything
+ // $("...").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() { ... });
+ //
+ // // Alternate syntax
+ // $("...").transition({
+ // opacity: 0.1,
+ // duration: 200,
+ // delay: 40,
+ // easing: 'in',
+ // complete: function() { /* ... */ }
+ // });
+ //
+ $.fn.transition = $.fn.transit = function(properties, duration, easing, callback) {
+ var self = this;
+ var delay = 0;
+ var queue = true;
+
+ // Account for `.transition(properties, callback)`.
+ if (typeof duration === 'function') {
+ callback = duration;
+ duration = undefined;
+ }
+
+ // Account for `.transition(properties, duration, callback)`.
+ if (typeof easing === 'function') {
+ callback = easing;
+ easing = undefined;
+ }
+
+ // Alternate syntax.
+ if (typeof properties.easing !== 'undefined') {
+ easing = properties.easing;
+ delete properties.easing;
+ }
+
+ if (typeof properties.duration !== 'undefined') {
+ duration = properties.duration;
+ delete properties.duration;
+ }
+
+ if (typeof properties.complete !== 'undefined') {
+ callback = properties.complete;
+ delete properties.complete;
+ }
+
+ if (typeof properties.queue !== 'undefined') {
+ queue = properties.queue;
+ delete properties.queue;
+ }
+
+ if (typeof properties.delay !== 'undefined') {
+ delay = properties.delay;
+ delete properties.delay;
+ }
+
+ // Set defaults. (`400` duration, `ease` easing)
+ if (typeof duration === 'undefined') { duration = $.fx.speeds._default; }
+ if (typeof easing === 'undefined') { easing = $.cssEase._default; }
+
+ duration = toMS(duration);
+
+ // Build the `transition` property.
+ var transitionValue = getTransition(properties, duration, easing, delay);
+
+ // Compute delay until callback.
+ // If this becomes 0, don't bother setting the transition property.
+ var work = $.transit.enabled && support.transition;
+ var i = work ? (parseInt(duration, 10) + parseInt(delay, 10)) : 0;
+
+ // If there's nothing to do...
+ if (i === 0) {
+ var fn = function(next) {
+ self.css(properties);
+ if (callback) { callback.apply(self); }
+ if (next) { next(); }
+ };
+
+ callOrQueue(self, queue, fn);
+ return self;
+ }
+
+ // Save the old transitions of each element so we can restore it later.
+ var oldTransitions = {};
+
+ var run = function(nextCall) {
+ var bound = false;
+
+ // Prepare the callback.
+ var cb = function() {
+ if (bound) { self.unbind(transitionEnd, cb); }
+
+ if (i > 0) {
+ self.each(function() {
+ this.style[support.transition] = (oldTransitions[this] || null);
+ });
+ }
+
+ if (typeof callback === 'function') { callback.apply(self); }
+ if (typeof nextCall === 'function') { nextCall(); }
+ };
+
+ if ((i > 0) && (transitionEnd) && ($.transit.useTransitionEnd)) {
+ // Use the 'transitionend' event if it's available.
+ bound = true;
+ self.bind(transitionEnd, cb);
+ } else {
+ // Fallback to timers if the 'transitionend' event isn't supported.
+ window.setTimeout(cb, i);
+ }
+
+ // Apply transitions.
+ self.each(function() {
+ if (i > 0) {
+ this.style[support.transition] = transitionValue;
+ }
+ $(this).css(properties);
+ });
+ };
+
+ // Defer running. This allows the browser to paint any pending CSS it hasn't
+ // painted yet before doing the transitions.
+ var deferredRun = function(next) {
+ var i = 0;
+
+ // Durations that are too slow will get transitions mixed up.
+ // (Tested on Mac/FF 7.0.1)
+ if ((support.transition === 'MozTransition') && (i < 25)) { i = 25; }
+
+ window.setTimeout(function() { run(next); }, i);
+ };
+
+ // Use jQuery's fx queue.
+ callOrQueue(self, queue, deferredRun);
+
+ // Chainability.
+ return this;
+ };
+
+ function registerCssHook(prop, isPixels) {
+ // For certain properties, the 'px' should not be implied.
+ if (!isPixels) { $.cssNumber[prop] = true; }
+
+ $.transit.propertyMap[prop] = support.transform;
+
+ $.cssHooks[prop] = {
+ get: function(elem) {
+ var t = $(elem).css('transit:transform');
+ return t.get(prop);
+ },
+
+ set: function(elem, value) {
+ var t = $(elem).css('transit:transform');
+ t.setFromString(prop, value);
+
+ $(elem).css({ 'transit:transform': t });
+ }
+ };
+
+ }
+
+ // ### uncamel(str)
+ // Converts a camelcase string to a dasherized string.
+ // (`marginLeft` => `margin-left`)
+ function uncamel(str) {
+ return str.replace(/([A-Z])/g, function(letter) { return '-' + letter.toLowerCase(); });
+ }
+
+ // ### unit(number, unit)
+ // Ensures that number `number` has a unit. If no unit is found, assume the
+ // default is `unit`.
+ //
+ // unit(2, 'px') //=> "2px"
+ // unit("30deg", 'rad') //=> "30deg"
+ //
+ function unit(i, units) {
+ if ((typeof i === "string") && (!i.match(/^[\-0-9\.]+$/))) {
+ return i;
+ } else {
+ return "" + i + units;
+ }
+ }
+
+ // ### toMS(duration)
+ // Converts given `duration` to a millisecond string.
+ //
+ // toMS('fast') //=> '400ms'
+ // toMS(10) //=> '10ms'
+ //
+ function toMS(duration) {
+ var i = duration;
+
+ // Allow for string durations like 'fast'.
+ if ($.fx.speeds[i]) { i = $.fx.speeds[i]; }
+
+ return unit(i, 'ms');
+ }
+
+ // Export some functions for testable-ness.
+ $.transit.getTransitionValue = getTransition;
+})(jQuery);
diff --git a/site/s2/script.js b/site/s2/script.js
new file mode 100644
index 0000000..ae9ba12
--- /dev/null
+++ b/site/s2/script.js
@@ -0,0 +1,39 @@
+(function() {
+ var lastID = 0;
+
+ $('.example').live('mouseenter play', function() {
+ var $example = $(this).closest('.example');
+ $example.trigger('reset');
+
+ $example.addClass('playing');
+
+ var $box = $example.find('.box:not(.ghost)');
+ var $ghost = $box.clone().addClass('ghost').appendTo($example.find('.area'));
+ var $pre = $example.find('pre');
+
+ var id = $example.attr('id');
+ if (!id) {
+ id = 'example-'+(++lastID);
+ $example.attr('id', id);
+ }
+
+ var code = $pre.text();
+ code = code.replace(/\$\('\.box'\)/g, '$("#'+id+' .box:not(.ghost)")');
+
+ eval(code);
+
+ });
+
+ $('.example').live('mouseleave reset', function() {
+ var $example = $(this).closest('.example');
+ var $ghost = $example.find('.ghost');
+
+ if ($ghost.length) {
+ $example.find('.box:not(.ghost)').remove();
+ $example.find('.ghost').removeClass('ghost');
+ }
+
+ $example.removeClass('playing');
+ });
+
+})();
diff --git a/site/s2/style.css b/site/s2/style.css
new file mode 100644
index 0000000..dfc27fb
--- /dev/null
+++ b/site/s2/style.css
@@ -0,0 +1,408 @@
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
+body { line-height: 1; }
+ol, ul { list-style: none; }
+blockquote, q { quotes: none; }
+blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
+table { border-collapse: collapse; border-spacing: 0; }
+
+/* ---------------------------------------------------------------------------- */
+/* Mixins */
+
+.clearfix,
+.nav:after {
+ content: '';
+ display: table;
+ clear: both;
+ *zoom: 1; }
+
+/* ---------------------------------------------------------------------------- */
+
+body, input, textarea, td {
+ line-height: 1.5;
+ font-family: Open Sans, sans-serif;
+ font-size: 1em; }
+
+body {
+ padding-bottom: 40px;
+ font-size: 10pt; }
+
+html {
+ height: 100%;
+
+ background:
+ linear-gradient(top left, rgba(0, 170, 255, 0.1), rgba(220, 110, 10, 0.2) 80%),
+ url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/shattered.png);
+ background-attachment: fixed, fixed;
+ /* background: #444 url(bg.jpg) 0 0 no-repeat fixed; */
+ /* background-size: 250% auto; */
+ color: #444;
+ padding: 0 20px;
+
+ box-shadow: inset 0 1px rgba(250, 250, 250, 0.4); }
+
+
+@media (max-width: 600px) {
+ html {
+ padding: 0 10px; } }
+
+.all {
+ background: white;
+ box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(0, 0, 0, 0.0), 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(0, 0, 0, 0.1);
+ border-radius: 2px;
+
+ margin: 20px auto;
+
+ padding-bottom: 40px; }
+
+a {
+ color: #39a;
+ text-decoration: none; }
+
+/* ---------------------------------------------------------------------------- */
+
+.l-page {
+ margin-left: auto;
+ margin-right: auto;
+
+ box-sizing: border-box;
+ max-width: 900px; }
+
+/* ---------------------------------------------------------------------------- */
+
+.nav {
+ border-bottom: solid 1px rgba(250, 250, 250, 0.3);
+ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+ padding-top: 20px;
+ padding-bottom: 10px;
+ margin-bottom: 30px; }
+
+.nav ul {
+ display: block; }
+
+.nav .left {
+ float: left; }
+
+.nav .right {
+ text-align: right;
+ float: right; }
+
+.nav li {
+ display: inline; }
+
+.nav a {
+ display: inline-block;
+
+ color: white;
+ text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+
+ font-weight: bold;
+ padding-right: 30px; }
+
+@media (max-width: 600px) {
+ .nav {
+ padding-left: 10px;
+ padding-right: 10px;
+
+ box-shadow: none;
+ border-bottom: 0;
+ margin-bottom: -20px; }
+
+ .nav .left,
+ .nav .right {
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ float: none; }
+
+ .nav .aux {
+ display: none; } }
+
+/* ---------------------------------------------------------------------------- */
+
+.header {
+ text-align: center;
+ text-shadow: 1px 1px rgba(250, 250, 250, 0.6);
+
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+
+ box-shadow: inset 0 -12px 18px -18px rgba(0, 0, 0, 0.3);
+ border-bottom: solid 1px #ddd;
+
+ line-height: 1.3;
+
+ padding: 50px 40px 94px 40px; }
+
+.header h1 {
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+
+ font-size: 46pt;
+ font-family: exo, sans-serif;
+ font-weight: 200;
+
+ text-shadow: 1px 1px 0 white, 2px 2px 0 rgba(30, 120, 200, 0.15); }
+
+.header p {
+ font-weight: 400;
+ color: #aaa;
+ font-style: italic;
+ font-size: 12pt; }
+
+/* ---------------------------------------------------------------------------- */
+
+.section {
+ overflow: hidden;
+ padding: 0px 120px; }
+
+.section p {
+ float: left;
+ width: 50%;
+
+ box-sizing: border-box;
+ padding: 0 20px;
+
+ margin: 20px 0; }
+
+.section p strong {
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+
+ font-size: 1.2em;
+ font-family: exo, sans-serif;
+ display: block;
+ color: #444;
+ font-weight: bold; }
+
+@media (max-width: 600px) {
+ .section {
+ padding: 0px 20px; }
+
+ .section p {
+ width: auto;
+ float: none; } }
+
+/* ---------------------------------------------------------------------------- */
+
+.download {
+ position: relative;
+ margin-top: -65px; }
+
+.download a {
+ margin: 0 auto;
+ display: block;
+ width: 120px;
+
+ border: solid 5px white;
+ border-radius: 65px;
+
+ position: relative;
+ z-index: 1; }
+
+.download a .in {
+ display: table-cell;
+ vertical-align: middle;
+ line-height: 1.3;
+
+ background: white;
+ width: 120px;
+ height: 120px;
+ border-radius: 61px;
+
+ line-height: 1.4;
+
+ text-align: center; }
+
+.download a strong,
+.download a small {
+ display: block;
+ padding: 0 10px; }
+
+.download a strong {
+ color: #333;
+ font-family: exo, sans-serif;
+ font-weight: bold;
+ font-size: 1.6em; }
+
+.download a small {
+ text-transform: uppercase;
+ font-size: 0.9em;
+ color: #999; }
+
+/* Hover state */
+.download a .in {
+ background: #222;
+ color: white; }
+
+.download a strong {
+ color: white; }
+
+.download a small {
+ color: #888; }
+
+/* Hover */
+.download a:hover .in {
+ background: #5ad; }
+
+.download a:hover small {
+ color: white; }
+
+/* ---------------------------------------------------------------------------- */
+
+.heading {
+ margin: 40px auto;
+
+ color: #456;
+ text-shadow: 0 1px 0 rgba(250, 250, 250, 0.2);
+ text-align: center; }
+
+.heading h2 {
+ font-size: 28pt;
+ font-family: exo, sans-serif;
+ font-weight: 200; }
+
+.heading p {
+ font-size: 1.1em;
+ opacity: 0.8;
+ line-height: 1.5;
+ padding: 0 80px; }
+
+.heading code {
+ padding: 1px 3px;
+ border-radius: 2px;
+ font-size: .9em;
+ background: rgba(250, 250, 250, 0.3); }
+
+@media (max-width: 600px) {
+ .heading {
+ padding: 0 20px;
+ text-align: left;
+ margin: 20px auto; }
+
+ .heading h2 {
+ font-size: 22pt; }
+
+ .heading p {
+ font-size: 1em;
+ padding: 0; } }
+
+/* ---------------------------------------------------------------------------- */
+
+.examples {
+ margin-top: 10px;
+ background: rgba(0, 0, 0, 0.1);
+ border-radius: 4px;
+ box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
+ padding: 10px 0 0 10px;
+ font-size: 0; }
+
+.example {
+ display: inline-block;
+ vertical-align: top;
+ text-align: left;
+
+ font-size: 10pt;
+ width: 33%;
+ box-sizing: border-box;
+ padding: 0 0 10px 0; }
+
+@media (min-width: 600px) {
+ .example:last-child:nth-child(3n+2) {
+ width: 66%; }
+}
+
+@media (max-width: 600px) {
+ .examples {
+ padding-right: 10px; }
+
+ .example:last-child:nth-child(odd) {
+ width: 100%; }
+
+ .example {
+ width: 50%; } }
+
+@media (max-width: 400px) {
+ .example {
+ padding-bottom: 10px;
+ width: 100%; } }
+
+.example .in {
+ position: relative;
+
+ box-shadow: 1px 1px rgba(0, 0, 0, 0.1), -1px 1px rgba(0, 0, 0, 0.1), 0 0 1px 1px rgba(0, 0, 0, 0.1);
+ border-radius: 2px;
+ background: white; }
+
+.example.playing .in {
+ background: #edfafa; }
+
+.example h3 {
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+
+ padding: 20px 20px 0 20px;
+ margin-bottom: -20px;
+
+ font-style: italic;
+ color: #507080;
+ font-weight: normal; }
+
+.example .area {
+ position: relative;
+ height: 150px; }
+
+@media (max-width: 600px) {
+ .example .area {
+ height: 100px; } }
+
+.example .box,
+.example .ghost {
+ opacity: 0.8;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+
+ background: #505060;
+ border-radius: 1px;
+ box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
+
+ margin: -16px 0 0 -16px;
+ width: 32px;
+ height: 32px;
+
+ z-index: 2; }
+
+.example .ghost {
+ z-index: 1;
+ background: #e5eeee;
+ box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
+
+.example .code {
+ background: #eee;
+ padding: 20px;
+ border-top: solid 1px #ddd;
+
+ border-bottom-left-radius: 2px;
+ border-bottom-right-radius: 2px; }
+
+.example pre {
+ text-shadow: 1px 1px 0 rgba(250, 250, 250, 0.9);
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+
+ white-space: pre-wrap; }
+
+@media (max-width: 600px) {
+ .example pre {
+ min-height: 3em; } }
+
+@media (max-width: 400px) {
+ .example pre {
+ min-height: 0; } }
+
+pre b {
+ border-radius: 2px;
+ box-shadow: 1px 1px rgba(0, 0, 0, 0.1);
+ padding: 1px;
+ background: #fafae0; }
From e7406681d18c639952f1b2812f54bdef2fc318e4 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Sun, 16 Dec 2012 03:01:49 +0800
Subject: [PATCH 22/89] More site updates.
---
site/s2/index.html | 446 ++++++++++++++++++++++++++++++---------------
site/s2/style.css | 236 ++++++++++++++++++++----
2 files changed, 500 insertions(+), 182 deletions(-)
diff --git a/site/s2/index.html b/site/s2/index.html
index 7cf6edf..06e4d5f 100644
--- a/site/s2/index.html
+++ b/site/s2/index.html
@@ -2,7 +2,7 @@
-
+ Transit - CSS transitions and transformations for jQuery
@@ -15,214 +15,360 @@
-
-
-
-
+
-
-
+
+
-
-
-
- Upgrading notes
- Upgrading from an older version? Transit should be mostly backward-compatible.
- See the change log for notes.
-
-
-
- Development version
- You may also download the development
- version which has spaces and comments preserved.
- Curious to see how it's made? See the annotated source code !
-
+
+
+ Upgrading notes
+ Upgrading from an older version? Transit should be mostly backward-compatible.
+ See the change log for notes.
+
+
+
+ Development version
+ You may also download the development
+ version which has spaces and comments preserved.
+ Curious to see how it's made? See the annotated source code !
+
+
-
-
-
Transformations
-
Hover to see it work.
-
+
-
+
+
Transformations
+
Hover to see it work.
+
-
-
-
Translate X
-
-
-
$('.box').transition({ x: '40px' });
+
+
+
+
+
Translate X
+
+
+
$('.box').transition({ x: '40px' });
+
-
-
-
-
Translate Y
-
-
-
$('.box').transition({ y: '40px' });
+
+
+
Translate Y
+
+
+
$('.box').transition({ y: '40px' });
+
-
-
-
-
Translate X/Y
-
-
-
$('.box').transition({ x: '40px', y: '40px' });
+
+
+
Translate X/Y
+
+
+
$('.box').transition({ x: '40px', y: '40px' });
+
-
+
-
-
More transformations
+
+
+
+
+
How to use Transit
+
+
+
+
+
Usage is simple!
+
+ Just include this script after jQuery. Requires jQuery 1.4+. Use
+ $('...').transition instead of jQuery's
+ $('...').animate. It has the same syntax as animate.
+
+
+
+
$("div").transition({ x: 200 });
+
+
+
Transformations
+
+ Transit provides the following transformations for use with
+ $('...').transition and $('...').css. See
+ the README
+ file for more information.
+
+
+
+
-
+
-
-
-
Rotate
-
-
-
$('.box').transition({ rotate: '45deg' });
+
+
+
More transformations
+
+
+
+
+
+
+
Rotate
+
+
+
$('.box').transition({ rotate: '45deg' });
+
-
-
-
-
Scale
-
-
+
+
+
Scale
+
+
+
$('.box').transition({ scale: 2.2 });
+
-
-
$('.box').transition({ scale: 2.2 });
+
+
+
+
+
Scale independently
+
+
+
$('.box').transition({ scale: [2.0, 1.5] });
+
-
-
-
-
Scale independently
-
-
+
+
+
Skew X
+
+
+
$('.box').transition({ skewX: '30deg' });
+
-
-
$('.box').transition({ scale: [2.0, 1.5] });
+
+
+
+
+
Skew Y
+
+
+
$('.box').transition({ skewY: '30deg' });
+
+
+
+
+
+
3D transformations
+
You may rotate using rotateX and rotateY.
+ Using perspective is optional, but it should always come
+ before rotateX/Y. Try it in Firefox 10+ or Webkit browsers!
-
-
-
Skew X
-
-
+
+
+
+
+
Rotate X
+
+
+
$('.box').transition({ perspective: '100px', rotateX: '180deg' });
+
+
+
+
+
+
+
Rotate Y
+
+
+
$('.box').transition({ perspective: '100px', rotateY: '180deg' });
+
-
-
$('.box').transition({ skewX: '30deg' });
+
+
+
+
+
Rotate 3D
+
+
+
$('.box').transition({ perspective: '100px', rotate3d: '1,1,0,180deg' });
+
+
-
-
-
Skew Y
-
-
+
+
Other properties
+
You can transition any property.
+
+
+
+
+
+
+
+
+
$('.box').transition({ opacity: 0 });
+
-
-
$('.box').transition({ skewY: '30deg' });
+
+
+
+
+
+
+
$('.box').transition({ marginLeft: '20px' , height: '50px' });
+
-
-
3D transformations
-
You may rotate using rotateX and rotateY.
- Using perspective is optional, but it should always come
- before rotateX/Y. Try it in Firefox 10+ or Webkit browsers!
-
+
+
+
+
+
Easing
+
Simply provide a 3rd parameter to $.transition.
+
-
+
-
-
-
Rotate X
-
-
-
$('.box').transition({ perspective: '100px', rotateX: '180deg' });
+
+
+
+
+
Linear
+
$('.box').transition({ x: 210 }, 500, 'linear' );
+
-
-
-
-
Rotate Y
-
-
-
$('.box').transition({ perspective: '100px', rotateY: '180deg' });
+
+
+
+
+
Ease
+
$('.box').transition({ x: 210 }, 500, 'ease' );
+
-
-
-
-
Rotate 3D
-
-
+
+
+
+
+
Snap
+
$('.box').transition({ x: 210 }, 500, 'snap' );
+
-
-
$('.box').transition({ perspective: '100px', rotate3d: '1,1,0,180deg' });
+
+
+
+
+
+
+
Custom
+
$('.box').transition({ x: 210 }, 500, 'cubic-bezier(0,0.9,0.3,1)' );
+
-
+
diff --git a/site/s2/style.css b/site/s2/style.css
index dfc27fb..e343ed1 100644
--- a/site/s2/style.css
+++ b/site/s2/style.css
@@ -1,5 +1,5 @@
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, main-notes, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, main-notes { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
@@ -18,13 +18,16 @@ table { border-collapse: collapse; border-spacing: 0; }
/* ---------------------------------------------------------------------------- */
+pre {
+ white-space: pre-wrap; }
+
body, input, textarea, td {
line-height: 1.5;
font-family: Open Sans, sans-serif;
+ color: #405060;
font-size: 1em; }
body {
- padding-bottom: 40px;
font-size: 10pt; }
html {
@@ -37,18 +40,12 @@ html {
/* background: #444 url(bg.jpg) 0 0 no-repeat fixed; */
/* background-size: 250% auto; */
color: #444;
- padding: 0 20px;
box-shadow: inset 0 1px rgba(250, 250, 250, 0.4); }
-
-@media (max-width: 600px) {
- html {
- padding: 0 10px; } }
-
-.all {
+.card {
background: white;
- box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(0, 0, 0, 0.0), 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(0, 0, 0, 0.1);
+ box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(0, 0, 0, 0.0), 0 2px 0 rgba(0, 0, 0, 0.1);
border-radius: 2px;
margin: 20px auto;
@@ -145,18 +142,84 @@ a {
text-shadow: 1px 1px 0 white, 2px 2px 0 rgba(30, 120, 200, 0.15); }
.header p {
+ max-width: 350px;
+ margin: 0 auto;
font-weight: 400;
- color: #aaa;
+ color: #5ad;
font-style: italic;
- font-size: 12pt; }
+ font-size: 15pt; }
/* ---------------------------------------------------------------------------- */
-.section {
+.subcontent {
+ padding: 0; }
+
+.subcontent .code,
+.subcontent .info {
+ padding: 40px 80px; }
+
+.subcontent .code {
+ padding-top: 20px;
+ padding-bottom: 20px;
+
+ color: #555;
+ text-shadow: 0 1px 0 rgba(250, 250, 250, 0.6);
+
+ border-top: solid 1px #e7e7e7;
+ border-bottom: solid 1px #e7e7e7;
+ background: #eee; }
+
+.subcontent .code pre {
+ font-size: 1.1em;
+ font-family: monaco, menlo, sans-serif;
+ line-height: 1.6; }
+
+.subcontent .code:first-child {
+ border-top: 0;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px; }
+
+.subcontent .code:last-child {
+ /* +subtleinset */
+ box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, 0.07);
+ border-top: solid 1px #ccc;
+
+ border-bottom: 0;
+ border-bottom-left-radius: 2px;
+ border-bottom-right-radius: 2px; }
+
+.subcontent h3 {
+ font-family: exo, sans-serif;
+ font-size: 1.7em;
+ font-weight: bold; }
+
+.subcontent code {
+ background: #fafae0;
+ font-size: 0.9em;
+ padding: 1px 3px;
+ box-shadow: 1px 1px rgba(0, 0, 0, 0.1);
+ border-radius: 2px; }
+
+/* Responsiveness */
+@media (min-width: 600px) {
+ .subcontent {
+ line-height: 1.7; }
+ .subcontent p {
+ padding-right: 200px; } }
+
+@media (max-width: 600px) {
+ .subcontent .code,
+ .subcontent .info {
+ padding-left: 20px;
+ padding-right: 20px; } }
+
+/* ---------------------------------------------------------------------------- */
+
+.main-notes {
overflow: hidden;
padding: 0px 120px; }
-.section p {
+.main-notes p {
float: left;
width: 50%;
@@ -165,7 +228,7 @@ a {
margin: 20px 0; }
-.section p strong {
+.main-notes p strong {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
@@ -176,15 +239,97 @@ a {
font-weight: bold; }
@media (max-width: 600px) {
- .section {
+ .main-notes {
padding: 0px 20px; }
- .section p {
+ .main-notes p {
width: auto;
float: none; } }
/* ---------------------------------------------------------------------------- */
+.section {
+ box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
+ background-attachment: fixed, fixed;
+ overflow: hidden;
+ padding: 60px 20px;
+ padding-top: 0; }
+
+@media (max-width: 600px) {
+ .section {
+ padding-left: 10px;
+ padding-right: 10px; } }
+
+.section.top {
+ box-shadow: 0;
+ padding-top: 0; }
+
+/* ---------------------------------------------------------------------------- */
+
+.section.usage {
+ background:
+ linear-gradient(top left, rgba(0, 0, 50, 0.5), rgba(0, 0, 50, 0.5) 80%),
+ url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noisy_grid.png);
+ background-attachment: fixed, fixed;
+
+ box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, 0.3);
+
+ border-top: solid 1px #aaa;
+ border-bottom: solid 1px #aaa;
+ padding-top: 40px;
+ padding-bottom: 20px; }
+
+.section.usage .heading {
+ margin: 0 auto;
+ margin-bottom: 40px; }
+
+.section.usage .heading h2 {
+ text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+ margin: 0;
+ color: white; }
+
+.transformations-list li {
+ padding: 5px 0;
+ display: inline-block;
+ width: 22%; }
+
+.transformations-list strong {
+ font-weight: bold; }
+
+.transformations-list small {
+ font-size: .9em; }
+
+@media (max-width: 600px) {
+ .section.usage .heading {
+ margin-bottom: 20px; }
+
+ .section.usage {
+ padding: 20px 20px; }
+
+ .section.usage .card {
+ margin-bottom: 0; }
+
+ .transformations-list li {
+ width: 45%; } }
+
+.section.more {
+ /* linear-gradient(top left, rgba(220, 110, 10, 0.2), rgba(0, 170, 255, 0.1) 80%), */
+ background:
+ linear-gradient(top left, rgba(255, 90, 200, 0.1), rgba(0, 170, 255, 0.07)),
+ linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)),
+ url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/shattered.png);
+ background-attachment: fixed, fixed;
+}
+
+/* ---------------------------------------------------------------------------- */
+
+.section.easing {
+ background:
+ linear-gradient(top left, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6)),
+ url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/shattered.png); }
+
+/* ---------------------------------------------------------------------------- */
+
.download {
position: relative;
margin-top: -65px; }
@@ -198,7 +343,10 @@ a {
border-radius: 65px;
position: relative;
- z-index: 1; }
+ z-index: 1;
+
+ transition: all 100ms ease;
+ transform: scale(1.0) translate3d(0, 0, 0); }
.download a .in {
display: table-cell;
@@ -210,6 +358,8 @@ a {
height: 120px;
border-radius: 61px;
+ text-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
+
line-height: 1.4;
text-align: center; }
@@ -220,33 +370,32 @@ a {
padding: 0 10px; }
.download a strong {
- color: #333;
font-family: exo, sans-serif;
font-weight: bold;
font-size: 1.6em; }
.download a small {
text-transform: uppercase;
- font-size: 0.9em;
- color: #999; }
+ font-size: 0.9em; }
-/* Hover state */
+/* Non-hover */
.download a .in {
- background: #222;
+ transition: all 150ms linear;
+ background: #5ad;
color: white; }
.download a strong {
color: white; }
.download a small {
- color: #888; }
+ color: #eee; }
/* Hover */
-.download a:hover .in {
- background: #5ad; }
+.download a:hover {
+ transform: scale(1.08); }
-.download a:hover small {
- color: white; }
+.download a:hover .in {
+ background: #222; }
/* ---------------------------------------------------------------------------- */
@@ -308,6 +457,8 @@ a {
padding: 0 0 10px 0; }
@media (min-width: 600px) {
+ .example:last-child:nth-child(3n+1) {
+ width: 100%; padding-right: 10px; }
.example:last-child:nth-child(3n+2) {
width: 66%; }
}
@@ -344,9 +495,10 @@ a {
padding: 20px 20px 0 20px;
margin-bottom: -20px;
- font-style: italic;
+ text-align: right;
+
color: #507080;
- font-weight: normal; }
+ font-weight: bold; }
.example .area {
position: relative;
@@ -356,6 +508,9 @@ a {
.example .area {
height: 100px; } }
+.example.slim .area {
+ height: 80px; }
+
.example .box,
.example .ghost {
opacity: 0.8;
@@ -378,18 +533,35 @@ a {
background: #e5eeee;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
+.example.start-from-left .box,
+.example.start-from-left .ghost {
+ left: 40px; }
+
.example .code {
+ /* +subtleinset */
+ box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, 0.07);
background: #eee;
+
padding: 20px;
- border-top: solid 1px #ddd;
+ border-top: solid 1px #ccc;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
+.example .code h4 {
+ font-weight: bold; }
+
+.example.white .code {
+ background: transparent;
+ border-top: 0;
+ padding-top: 0;
+ box-shadow: none; }
+
.example pre {
text-shadow: 1px 1px 0 rgba(250, 250, 250, 0.9);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
+ font-style: italic;
white-space: pre-wrap; }
From 721b53a72a6770418261de138dd94945fb543d84 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Sun, 16 Dec 2012 03:38:42 +0800
Subject: [PATCH 23/89] More site updates.
---
site/s2/index.html | 68 ++++++++++++++++++++++++++++++++++----
site/s2/style.css | 82 ++++++++++++++++++++++++++++++++++++++++------
2 files changed, 134 insertions(+), 16 deletions(-)
diff --git a/site/s2/index.html b/site/s2/index.html
index 06e4d5f..bad7f7f 100644
--- a/site/s2/index.html
+++ b/site/s2/index.html
@@ -73,7 +73,7 @@ Transformations
Hover to see it work.
-
+
@@ -167,7 +167,7 @@
Transformations
More transformations
-
+
@@ -238,7 +238,7 @@
3D transformations
before rotateX/Y. Try it in Firefox 10+ or Webkit browsers!
-
+
@@ -283,7 +283,7 @@
Other properties
You can transition any property.
-
+
@@ -312,13 +312,14 @@
Other properties
-
+
+
Easing
Simply provide a 3rd parameter to $.transition.
-
+
@@ -369,6 +370,61 @@
Custom
+
+
+
+
+
+
diff --git a/site/s2/style.css b/site/s2/style.css
index e343ed1..53ac376 100644
--- a/site/s2/style.css
+++ b/site/s2/style.css
@@ -323,7 +323,7 @@ a {
/* ---------------------------------------------------------------------------- */
-.section.easing {
+.section.duration {
background:
linear-gradient(top left, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6)),
url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/shattered.png); }
@@ -400,7 +400,7 @@ a {
/* ---------------------------------------------------------------------------- */
.heading {
- margin: 40px auto;
+ margin: 50px auto;
color: #456;
text-shadow: 0 1px 0 rgba(250, 250, 250, 0.2);
@@ -443,41 +443,58 @@ a {
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
- padding: 10px 0 0 10px;
+ padding: 10px 10px 0 10px;
font-size: 0; }
.example {
+ box-sizing: border-box;
display: inline-block;
vertical-align: top;
text-align: left;
font-size: 10pt;
- width: 33%;
box-sizing: border-box;
padding: 0 0 10px 0; }
+/* -- */
+
+.single .example {
+ width: 100%; }
+
+.trio .example {
+ width: 33.33333%; }
+
@media (min-width: 600px) {
- .example:last-child:nth-child(3n+1) {
- width: 100%; padding-right: 10px; }
- .example:last-child:nth-child(3n+2) {
- width: 66%; }
+ .trio .example:last-child:nth-child(3n+1) {
+ width: 100%; }
+ .trio .example:last-child:nth-child(3n+2) {
+ width: 66.6666%; }
}
@media (max-width: 600px) {
.examples {
padding-right: 10px; }
- .example:last-child:nth-child(odd) {
+ .trio .example:last-child:nth-child(2n+1) {
width: 100%; }
- .example {
+ .trio .example {
width: 50%; } }
@media (max-width: 400px) {
+ .trio .example,
+ .duo .example,
.example {
padding-bottom: 10px;
width: 100%; } }
+/* -- */
+
+.duo .example {
+ width: 50%; }
+
+/* -- */
+
.example .in {
position: relative;
@@ -578,3 +595,48 @@ pre b {
box-shadow: 1px 1px rgba(0, 0, 0, 0.1);
padding: 1px;
background: #fafae0; }
+
+/* -- */
+
+.example.nano h3 {
+ margin: 0;
+ float: none;
+ text-align: left; }
+
+.example.nano p {
+ padding: 0 20px; }
+
+.example.nano .area {
+ width: 32px;
+ height: 32px;
+ float: right;
+ margin: 20px; }
+
+.example.nano .code {
+ margin-top: 20px; }
+
+/* -- */
+
+.examples.card {
+ background: white;
+ padding: 0;
+ }
+.examples .fit {
+ background: transparent;
+ width: 100%;
+ display: table; }
+.examples .fit .example {
+ border-right: solid 1px #ccc;
+ padding: 0;
+ display: table-cell; }
+.examples .fit .example .in {
+ height: 100%; }
+.examples .fit .in {
+ box-shadow: none;
+ background: transparent;
+ border: 0; }
+.examples .fit .code {
+ border-top: 0;
+ padding-top: 0;
+ box-shadow: 0;
+ background: transparent; }
From 2ff72c020a915305ff6b38652e289a00adec6ae6 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Sun, 16 Dec 2012 04:52:33 +0800
Subject: [PATCH 24/89] Update HISTORY.md.
---
HISTORY.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/HISTORY.md b/HISTORY.md
index d9d9920..e06dc43 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -7,7 +7,7 @@ is a pre-release of 1.0.
### Fixes and additions:
* Fix support for jQuery 1.8, IE 10, Firefox 16, Android Jellybean.
- (#48, #62, #63, #70, #71, #76, #77, #80, #81, #82, #85, #90, #92, #93)
+ (#48, #62, #63, #69, #70, #71, #72, #76, #77, #80, #81, #82, #85, #86, #90, #92, #93)
* Compatibility with Twitter Bootstrap has been fixed. (#67)
* Unprefixed CSS properties are now used if your browser supports them.
* Account for prefix-free transition end for Mozilla. (#97)
From 51814d8fd211890488a85277e3491948a88d5df6 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz"
Date: Sun, 16 Dec 2012 04:52:36 +0800
Subject: [PATCH 25/89] Update site.
---
site/s2/index.html | 236 +++++++++++++++++++++++++++++++++------------
site/s2/style.css | 229 +++++++++++++++++++++++++++++--------------
2 files changed, 330 insertions(+), 135 deletions(-)
diff --git a/site/s2/index.html b/site/s2/index.html
index bad7f7f..4d85cdd 100644
--- a/site/s2/index.html
+++ b/site/s2/index.html
@@ -69,13 +69,13 @@ Transit
-
Transformations
-
Hover to see it work.
+
Transitions & transformations
+
Here are some basic transformations. Hover to see them work.
-
+
Translate X
@@ -87,7 +87,7 @@
Translate X
-
+
Translate Y
@@ -99,7 +99,7 @@
Translate Y
-
+
Translate X/Y
@@ -169,7 +169,7 @@
More transformations
-
+
Rotate
@@ -181,7 +181,7 @@
Rotate
-
+
Scale
@@ -193,7 +193,7 @@
Scale
-
+
Scale independently
@@ -205,7 +205,7 @@
Scale independently
-
+
Skew X
@@ -217,7 +217,7 @@
Skew X
-
+
Skew Y
@@ -240,7 +240,7 @@
3D transformations
-
+
Rotate X
@@ -252,7 +252,7 @@
Rotate X
-
+
Rotate Y
@@ -264,7 +264,7 @@
Rotate Y
-
+
Rotate 3D
@@ -285,24 +285,26 @@
Other properties
-
+
+
Example one
$('.box').transition({ opacity: 0 });
-
+
+
Example two
-
$('.box').transition({ marginLeft: '20px' , height: '50px' });
+
$('.box').transition({ marginTop: '10px' , height: '22px' });
@@ -321,50 +323,50 @@
Easing
-
+
+
Linear
-
Linear
-
$('.box').transition({ x: 210 }, 500, 'linear' );
+
$('.box').transition( { x: 210 }, 500, 'linear' );
-
+
+
Ease
-
Ease
-
$('.box').transition({ x: 210 }, 500, 'ease' );
+
$('.box').transition( { x: 210 }, 500, 'ease' );
-
+
+
Snap
-
Snap
-
$('.box').transition({ x: 210 }, 500, 'snap' );
+
$('.box').transition( { x: 210 }, 500, 'snap' );
-
+
+
Custom
-
Custom
-
$('.box').transition({ x: 210 }, 500, 'cubic-bezier(0,0.9,0.3,1)' );
+
$('.box').transition( { x: 210 }, 500, 'cubic-bezier(0,0.9,0.3,1)' );
@@ -381,51 +383,165 @@
Custom
More features
-
-
+
+
+
+
+
+
Delay
+
You can specify a delay.
+
+
$('.box').transition({ scale: 0, delay: 500 });
+
+
+
+
+
+
+
+
Optional units
+
All units (eg, px, deg , ms ) are optional.
+
+
$('.box').transition({ y: 30 });
+
+
+
-
-
-
-
Delay
-
You can specify a delay.
-
-
$('.box').transition({ scale: 0, delay: 500 });
-
+
+
+
+
$.fn.css
+
Transform properties work with .css() as well.
+
+
$('.box').css ({ rotate: '30deg' });
+
-
-
-
-
Optional units
-
All units (eg, px, deg , ms ) are optional.
-
-
$('.box').transition({ y: 30 });
-
+
+
+
+
Vendor prefixes
+
Vendor prefixes are auto-added for transform, transition, and others.
+
+
$('.box').css({ transform: 'scale(0.2)' });
+
-
-
-
-
Relative values
-
Start your values with either += or -= to add/subtract to current values.
-
-
$('.box').transition({ rotate: '+=30deg' });
-
+
+
+
+
Alternate easing/duration syntax
+
You can provide easing and duration in the options.
+
+
$('.box').transition({ y: 32, easing: 'snap' , duration: 200 });
+
+
+
+
Relative values
+
Start your values with either += or -= to add/subtract to current values.
+
+
$('.box').transition({ rotate: '+=30deg' , x: '+= 10' });
+
+
+
+
+
+
+
+
+
+
+
+
Browser support
+
+
+
+
+
Supported browsers
+
+ See caniuse.com's report on CSS transitions.
+ To support iOS4 and below, Transit uses translate3d and scale3d.
+
+
+ IE 10+
+ Firefox 4+
+ Safari 5+
+ Chrome 10+
+ Opera 11+
+ Mobile Safari
+
+
+
+
+
What about older browsers?
+
+ Transit degrades older browsers by simply not doing the
+ transformations (rotate, scale, etc) while still doing standard CSS
+ (opacity, marginLeft, etc) without any animation. Delays and
+ durations will be ignored.
+
+
+
+
+
// Delegate .transition() calls to .animate() // if the browser can't do CSS transitions. if (!$.support.transition) $.fn.transition = $.fn.animate;
+
Fallback to frame-based animation
+
+ If you would like to fallback to classic animation when transitions aren't supported,
+ just manually redefine .transitition to .animate.
+
+
+ (Note: if you're using custom easing, you may need to also use jQuery Easing , and restrict
+ your use of easing options to the ones defined there.)
+
+
+
+
+
+
Recipes
+
+
+
+
+
$.fx.speeds._default = 300;
+
Default duration
+
+ Transit honors jQuery's default speed, $.fx.speeds._default.
+
+
+
+
+
$.cssEase['bounce'] = 'cubic-bezier(0,1,0.5,1.3)'; $('.box').transition({ x: 0 }, 500, 'bounce');
+
Custom easing
+
+ Define custom easing aliases in $.cssEase.
+
+
+
+
+
+
+