Original Flavour: Changed animation type from jQuery to css-transition. Doesn't seem to make that much different.

Also, fixed a bug where I didn't remove the "transitionend" event handler which was causing all sorts of strange things (like zooming in on a tab when the search-box was used.

browser/base/content/tabcandy/app/ui.js

@@ -39,23 +39,25 @@ var Page = {
             // ZOOM!          
             var [w,h] = [$(this).width(), $(this).height()];
             var origPos = $(this).position();
+            var zIndex = $(this).css("zIndex");
             var scale = window.innerWidth/w;
-            
+                        
             $(this).addClass("scale-animate").css({
               top: 0, left: 0,
-              width:w*scale, height:h*scale
+              width:w*scale, height:h*scale,
+              zIndex: 999999
             }).bind("transitionend", function(e){
               // We will get one of this events for every property CSS-animated...
               // I choose one randomly (width) and only do things for that.
               if( e.originalEvent.propertyName != "width" ) return;
-
               // Switch tabs, and the re-size and re-position the animated
               // tab image.
               $(this).find("canvas").data("link").tab.focus();
               $(this)
                 .removeClass("scale-animate")
-                .css({top: origPos.top, left: origPos.left, width:w, height:h});
-              Navbar.show();
+                .css({top: origPos.top, left: origPos.left, width:w, height:h, zIndex:zIndex})
+                .unbind("transitionend");
+              Navbar.show();           
             })
             // END ZOOM
             
@@ -101,17 +103,34 @@ var Page = {
         // its mirror for the zoom out.
         var $tab = $(lastTab.mirror.el);
         
-        var [w,h, pos] = [$tab.width(), $tab.height(), $tab.position()];
+        var [w,h, pos, zIndex] = [$tab.width(), $tab.height(), $tab.position(), $tab.css("zIndex")];
         $tab.css({
             top: 0, left: 0,
             width: window.innerWidth,
             height: h * (window.innerWidth/w),
             zIndex: 999999,
-          })          
-          .animate({
-            top: pos.top, left: pos.left,
-            width: w, height: h
-          },250);
+            });
+        
+        // Not entirely sure why we need the setTimeout here?
+        // Without it, it seems to not do the css-transition at all
+        // and with it, it works just fine.
+        setTimeout(function(){
+          $tab.addClass("scale-down-animate")
+          $tab.css({
+                top: pos.top, left: pos.left,
+                width: w, height: h
+                })
+              .bind("transitionend", function(e){
+                // We will get one of this events for every property CSS-animated...
+                // I choose one randomly (width) and only do things for that.
+                if( e.originalEvent.propertyName != "width" ) return;
+                $tab
+                  .css("zIndex", zIndex)
+                  .removeClass("scale-down-animate")
+                  .unbind("transitionend");
+              });
+        }, 0);
+          
       }
       lastTab = this;
     });

content/candies/original/index.html

@@ -120,6 +120,12 @@
     -moz-transition-duration: .17s;
     -moz-transition-timing-function: cubic-bezier(1.0, 0.0, 1.0, 1.0);        
   }
+  
+  .scale-down-animate{
+    -moz-transition-property: height, width, left, top;
+    -moz-transition-duration: .26s;
+    -moz-transition-timing-function: ease-out;        
+  }  
 
    
   /* Resizable