src & docs : enable transitions for Opera;

disable scale transforms when transformsEnabled: false

v1.5.04

Fixes #123; Fixes #122

_posts/demos/2011-06-13-hash-history.html

@@ -154,7 +154,7 @@ <h3>Layout modes</h3>
         // get options object from hash
         var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {},
             // do not animate first call
-            aniEngine = hashChanged ? ( $.browser.opera ? 'jquery' : 'best-available' ) : 'none',
+            aniEngine = hashChanged ? 'best-available' : 'none',
             // apply defaults where no option was specified
             options = $.extend( {}, defaultOptions, hashOptions, { animationEngine: aniEngine } );
         // apply options from hash

_posts/docs/2010-12-01-introduction.mdown

@@ -104,18 +104,21 @@ Add these styles to your CSS for [filtering](filtering.html), [animation](animat
 .isotope .isotope-item {
   -webkit-transition-duration: 0.8s;
      -moz-transition-duration: 0.8s;
+       -o-transition-duration: 0.8s;
           transition-duration: 0.8s;
 }
 
 .isotope {
   -webkit-transition-property: height, width;
      -moz-transition-property: height, width;
+       -o-transition-property: height, width;
           transition-property: height, width;
 }
 
 .isotope .isotope-item {
   -webkit-transition-property: -webkit-transform, opacity;
      -moz-transition-property:    -moz-transform, opacity;
+       -o-transition-property:         top, left, opacity;
           transition-property:         transform, opacity;
 }
 
@@ -126,6 +129,7 @@ Add these styles to your CSS for [filtering](filtering.html), [animation](animat
 .isotope .isotope-item.no-transition {
   -webkit-transition-duration: 0s;
      -moz-transition-duration: 0s;
+       -o-transition-duration: 0s;
           transition-duration: 0s;
 }
 

_posts/docs/2010-12-03-options.mdown

@@ -262,11 +262,13 @@ The property name of the method within the `getSortData` option to sort item ele
 <dl class="clearfix">
   <dt><code>transformsEnabled</code></dt>
   <dd class="option-type">Boolean</dd>
-  <dd class="default"><code><span class="kc">true</span></code></dd>
+  <dd class="default"><code>!$.browser.opera</code></dd>
 </dl>
 
 Isotope uses CSS3 transform to position item elements, when available in the browser. Setting `transformsEnabled` to <code><span class="kc">false</span></code> will disable this feature so all browsers use top/left absolute positioning. Useful for [resolving issues with Flash content](help.html#flash).
 
+Default value is set to <code><span class="kc">false</span></code> for Opera. See [Help: CSS transforms in Opera](help.html#css_transforms_in_opera).
+
 ### Additional CSS {#transformsEnabled-css}
 
 If you do disable transforms, but still want to use [CSS transitions](animating.html#css_transitions), you'll need add the following CSS:
@@ -276,25 +278,12 @@ If you do disable transforms, but still want to use [CSS transitions](animating.
 .isotope .isotope-item {
   -webkit-transition-property: top, left, opacity;
      -moz-transition-property: top, left, opacity;
+       -o-transition-property: top, left, opacity;
           transition-property: top, left, opacity;
 }
 
 {% endhighlight %}
 
-### Disabling hidden and visible scale styles
-
-If you are using filtering, it's also a good idea to disable the scale transform with the [`hiddenStyle` option](#hiddenstyle) and [`visibleStyle` option](#visiblestyle).
-
-{% highlight javascript %}
-
-$('#container').isotope({
-  transformsEnabled: false,
-  visibleStyle: { opacity: 1 },
-  hiddenStyle: { opacity: 0 }
-});
-
-{% endhighlight %}
-
 ## visibleStyle
 
 <dl class="clearfix">

_posts/docs/2010-12-09-animating.mdown

@@ -32,18 +32,21 @@ To enable animation with CSS transitions, you'll need the following code in your
   /* change duration value to whatever you like */
   -webkit-transition-duration: 0.8s;
      -moz-transition-duration: 0.8s;
+       -o-transition-duration: 0.8s;
           transition-duration: 0.8s;
 }
 
 .isotope {
   -webkit-transition-property: height, width;
      -moz-transition-property: height, width;
+       -o-transition-property: height, width;
           transition-property: height, width;
 }
 
 .isotope .isotope-item {
   -webkit-transition-property: -webkit-transform, opacity;
      -moz-transition-property:    -moz-transform, opacity;
+       -o-transition-property:         top, left, opacity;
           transition-property:         transform, opacity;
 }
 

_posts/docs/2011-12-11-help.mdown

@@ -125,24 +125,9 @@ isotopeInstance.masonry.columnWidth; // Layout mode specific properties
 
 ## CSS transforms in Opera
 
-Currently, [using CSS transforms in Opera distorts text rendering](http://dropshado.ws/post/1260101028/opera-transform-issues). To avoid this issue, I recommend disabling Isotope to use transforms.  
+Currently, [using CSS transforms in Opera distorts text rendering](http://dropshado.ws/post/1260101028/opera-transform-issues). To avoid this issue, the default value of [`transformsEnabled`](options.html#transformsenabled) is set to <code><span class="kc"></span></code> for Opera.
 
-Isotope's default options are already set to not use CSS transforms in Opera.
-
-{% highlight javascript %}
-
-// Isotope default options
-hiddenStyle : Modernizr.csstransforms && !$.browser.opera ? 
-  { opacity : 0, scale : 0.001 } : // browsers support CSS transforms, not Opera
-  { opacity : 0 }, // other browsers, including Opera
-visibleStyle : Modernizr.csstransforms && !$.browser.opera ? 
-  { opacity : 1, scale : 1 } : // browsers support CSS transforms, not Opera
-  { opacity : 1 }, // other browsers, including Opera
-animationEngine : $.browser.opera ? 'jquery' : 'best-available',
-
-{% endhighlight %}
-
-Also note that the [recommended transition CSS](animating.html#css_transitions) is missing declarations for Opera.
+Also note that the [recommended transition CSS](animating.html#css_transitions) uses `left`/`top` properties for Opera.
 
 ## Infinite Scroll with filtering or sorting
 
@@ -159,9 +144,8 @@ The best way to resolve this issue is to disable CSS transforms by setting the [
 {% highlight javascript %}
 
 $('#container').isotope({
-  transformsEnabled: false,
-  visibleStyle: { opacity: 1 },
-  hiddenStyle: { opacity: 0 }
+  // options...
+  transformsEnabled: false
 });
 
 {% endhighlight %}

css/style.css

@@ -17,18 +17,21 @@
 .isotope .isotope-item {
   -webkit-transition-duration: 0.8s;
      -moz-transition-duration: 0.8s;
+       -o-transition-duration: 0.8s;
           transition-duration: 0.8s;
 }
 
 .isotope {
   -webkit-transition-property: height, width;
      -moz-transition-property: height, width;
+       -o-transition-property: height, width;
           transition-property: height, width;
 }
 
 .isotope .isotope-item {
   -webkit-transition-property: -webkit-transform, opacity;
      -moz-transition-property:    -moz-transform, opacity;
+       -o-transition-property:         top, left, opacity;
           transition-property:         transform, opacity;
 }
 
@@ -39,6 +42,7 @@
 .isotope .isotope-item.no-transition {
   -webkit-transition-duration: 0s;
      -moz-transition-duration: 0s;
+       -o-transition-duration: 0s;
           transition-duration: 0s;
 }
 
@@ -50,6 +54,7 @@
 .isotope.infinite-scrolling {
   -webkit-transition: none;
      -moz-transition: none;
+       -o-transition: none;
           transition: none;
 }
 

jquery.isotope.js

@@ -1,5 +1,5 @@
 /**
- * Isotope v1.5.03
+ * Isotope v1.5.04
  * An exquisite jQuery plugin for magical layouts
  * http://isotope.metafizzy.co
  *
@@ -329,21 +329,17 @@
     containerClass : 'isotope',
     itemClass : 'isotope-item',
     hiddenClass : 'isotope-hidden',
-    hiddenStyle : Modernizr.csstransforms && !$.browser.opera ? 
-      { opacity : 0, scale : 0.001 } : // browsers support CSS transforms, not Opera
-      { opacity : 0 }, // other browsers, including Opera
-    visibleStyle : Modernizr.csstransforms && !$.browser.opera ? 
-      { opacity : 1, scale : 1 } : // browsers support CSS transforms, not Opera
-      { opacity : 1 },  // other browsers, including Opera
-    animationEngine : $.browser.opera ? 'jquery' : 'best-available',
+    hiddenStyle: { opacity: 0, scale: 0.001 },
+    visibleStyle: { opacity: 1, scale: 1 },
+    animationEngine: 'best-available',
     animationOptions: {
       queue: false,
       duration: 800
     },
     sortBy : 'original-order',
     sortAscending : true,
     resizesContainer : true,
-    transformsEnabled : true,
+    transformsEnabled: !$.browser.opera, // disable transforms in Opera
     itemPositionDataEnabled: false
   };
 
@@ -488,9 +484,16 @@
     },
 
     _updateUsingTransforms : function() {
-      this.usingTransforms = this.options.transformsEnabled && Modernizr.csstransforms && Modernizr.csstransitions && !this.isUsingJQueryAnimation;
+      var usingTransforms = this.usingTransforms = this.options.transformsEnabled && 
+        Modernizr.csstransforms && Modernizr.csstransitions && !this.isUsingJQueryAnimation;
 
-      this.getPositionStyles = this.usingTransforms ? this._translate : this._positionAbs;
+      // prevent scales when transforms are disabled
+      if ( !usingTransforms ) {
+        delete this.options.hiddenStyle.scale;
+        delete this.options.visibleStyle.scale;
+      }
+
+      this.getPositionStyles = usingTransforms ? this._translate : this._positionAbs;
     },