fix animate() for elements just added to DOM

Activating CSS transitions for an element just added to the DOM won't
work in either Webkit or Mozilla. To work around this, we used to defer
setting CSS properties with setTimeout (see 272513b).

This solved the problem for Webkit, but not for latest versions of
Firefox. Mozilla seems to need at least 15ms timeout, and even this
value varies.

A better solution for both engines is to trigger "layout". This is done
here by reading `clientLeft` from an element. There are other
properties and methods that trigger layout; see
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

src/fx.js

@@ -86,11 +86,13 @@
     }
     if (duration > 0) this.bind(endEvent, wrappedCallback)
 
-    setTimeout(function() {
-      that.css(cssValues)
-      if (duration <= 0) setTimeout(function() {
-        that.each(function(){ wrappedCallback.call(this) })
-      }, 0)
+    // trigger page reflow so new elements can animate
+    this.size() && this.get(0).clientLeft
+
+    this.css(cssValues)
+
+    if (duration <= 0) setTimeout(function() {
+      that.each(function(){ wrappedCallback.call(this) })
     }, 0)
 
     return this

test/fx.html

@@ -239,6 +239,10 @@ <h1>Zepto effects tests</h1>
             t.assertStyle('linear',   el, 'animation-timing-function')
           })
         })
+      },
+
+      testEmptyCollection: function(t){
+        t.assert($(null).animate({opacity:0}))
       }
     })
   })()