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 + + + + + + + + +
+ Use: + jQ 1.8.1 + jQ 1.7 + jQ 1.6 + jQ 1.5 + +
+ +
+

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 @@ + + + + + + + + + + + + + + + + +
+
+

Transit

+

Super-smooth CSS transitions for jQuery

+
+ + + +
+

+ 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 @@ -