Merge branch 'master' of github.com:manolo/gquery into JsniBundle

6 files changed, 224 insertions, 107 deletions

diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Effects.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Effects.java
index d8b07659..8de5d91c 100755
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Effects.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Effects.java
@@ -27,6 +27,8 @@ import com.google.gwt.query.client.plugins.effects.Fx;
 import com.google.gwt.query.client.plugins.effects.PropertiesAnimation;
 import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing;
 import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.EasingCurve;
+import com.google.gwt.query.client.plugins.effects.TransitionsAnimation;
+import com.google.gwt.query.client.plugins.effects.TransitionsAnimation.TransitionsClipAnimation;
 
 /**
  * Effects plugin for Gwt Query.
@@ -42,7 +44,16 @@ public class Effects extends QueuePlugin<Effects> {
 
     // Each Animation is associated to one element
     protected Element e;
+    protected Properties prps;
 
+    protected GQAnimation setElement(Element element) {
+      e = element;
+      return this;
+    }
+    protected GQAnimation setProperties(Properties properties) {
+      prps = properties == null ? Properties.create() : properties;
+      return this;
+    }
     protected void onStart() {
       // Mark this animation as actual, so as we can stop it in the GQuery.stop() method
       $(e).data(ACTUAL_ANIMATION, this);
@@ -69,7 +80,6 @@ public class Effects extends QueuePlugin<Effects> {
     public static final int SLOW = 600;
   }
 
-
   public static final Class<Effects> Effects = GQuery.registerPlugin(
       Effects.class, new Plugin<Effects>() {
         public Effects init(GQuery gq) {
@@ -159,11 +169,16 @@ public class Effects extends QueuePlugin<Effects> {
   public Effects animate(Object stringOrProperties, final int duration,
       final Easing easing, final Function... funcs) {
 
+
     final Properties p = (stringOrProperties instanceof String)
         ? $$((String) stringOrProperties) : (Properties) stringOrProperties;
 
     for (Element e: elements()) {
-      queueAnimation(e, new PropertiesAnimation(easing, e, p, funcs), duration);
+      if (Fx.css3) {
+        new TransitionsAnimation(easing, e, p, funcs).run(duration);
+      } else {
+        queueAnimation(e, new PropertiesAnimation(easing, e, p, funcs), duration);
+      }
     }
     return this;
   }
@@ -309,7 +324,11 @@ public class Effects extends QueuePlugin<Effects> {
       final ClipAnimation.Corner c, final ClipAnimation.Direction d,
       final int duration, final Function... f) {
     for (Element e : elements()) {
-      queueAnimation(e, new ClipAnimation(e, a, c, d, f), duration);
+      if (Fx.css3) {
+        new TransitionsClipAnimation(e, a, c, d, null, null, f).run(duration);
+      } else {
+        queueAnimation(e, new ClipAnimation(e, a, c, d, f), duration);
+      }
     }
     return this;
   }
@@ -459,7 +478,7 @@ public class Effects extends QueuePlugin<Effects> {
   public Effects fadeOut(int millisecs, Function... f) {
     return animate("opacity: 'hide'", millisecs, f);
   };
-  
+
   /**
    * Fade the opacity of all matched elements to a specified opacity and firing
    * an optional callback after completion. Only the opacity is adjusted for
@@ -469,7 +488,7 @@ public class Effects extends QueuePlugin<Effects> {
   public Effects fadeTo(double opacity, Function... f) {
     return fadeTo(Speed.DEFAULT, opacity, f);
   }
-  
+
   /**
    * Fade the opacity of all matched elements to a specified opacity and firing
    * an optional callback after completion. Only the opacity is adjusted for
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/ClipAnimation.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/ClipAnimation.java
index 2285230c..e0047fc0 100755
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/ClipAnimation.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/ClipAnimation.java
@@ -15,11 +15,11 @@
  */
 package com.google.gwt.query.client.plugins.effects;
 
-
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.query.client.Function;
 import com.google.gwt.query.client.GQuery;
 import com.google.gwt.query.client.Properties;
+import com.google.gwt.query.client.js.JsUtils;
 import com.google.gwt.query.client.plugins.Effects;
 
 /**
@@ -51,25 +51,42 @@ public class ClipAnimation extends PropertiesAnimation {
   private static final String[] attrsToSave = new String[]{
       "position", "overflow", "visibility", "white-space", "top", "left", "width", "height"};
 
-  Action action;
-  Corner corner;
-  Direction direction;
-  int percent;
+  private Action action;
+  private Corner corner;
+  private Direction direction;
   private GQuery back = Effects.$();
-  private Function[] funcs;
   private Effects g;
+  private Action currentAction;
+
+  public ClipAnimation(Element elem, Properties p, Function... funcs) {
+    super(elem, p, funcs);
+    corner = Corner.CENTER;
+    try {
+      corner = Corner.valueOf(getNormalizedValue("clip-origin", p));
+    } catch (Exception e) {
+    }
+    direction = Direction.BIDIRECTIONAL;
+    try {
+      direction = Direction.valueOf(getNormalizedValue("clip-direction", p));
+    } catch (Exception e) {
+    }
+    try {
+      action = Action.valueOf(getNormalizedValue("clip-action", p));
+    } catch (Exception e) {
+    }
+    g = GQuery.$(e).as(Effects.Effects);
+  }
+
+  private static String getNormalizedValue(String value, Properties p) {
+    return JsUtils.hyphenize(p.getStr("clip-direction")).replace("-", "_").toUpperCase();
+  }
 
   public ClipAnimation(Element elem, Action a, Corner c, Direction d, Easing easing,
       Properties p, final Function... funcs) {
     super(easing, elem, p, funcs);
-    if (a == Action.TOGGLE) {
-      a = GQuery.$(elem).isVisible() ? Action.HIDE : Action.SHOW;
-    }
     this.action = a;
     this.corner = c;
     this.direction = d;
-    this.funcs = funcs;
-    e = elem;
     g = GQuery.$(e).as(Effects.Effects);
   }
 
@@ -78,33 +95,23 @@ public class ClipAnimation extends PropertiesAnimation {
   }
 
   @Override
-  public void onCancel() {
-    Boolean jumpToEnd = Effects.$(e).data(Effects.JUMP_TO_END, Boolean.class);
-    if (jumpToEnd != null && jumpToEnd){
-      onComplete();
-    } else {
-      g.dequeue();
-    }
-  }
-
-  @Override
   public void onComplete() {
     super.onComplete();
-    if (action == Action.HIDE) {
+    if (currentAction == Action.HIDE) {
       g.hide();
     }
     g.restoreCssAttrs(attrsToSave);
     back.remove();
     back = Effects.$();
     g.css("clip", "");
-    g.each(funcs);
-    g.dequeue();
   }
 
   @Override
   public void onStart() {
+    boolean hidden = !g.isVisible();
     super.onStart();
-    g.show();
+    currentAction = action != Action.TOGGLE ? action :  hidden ? Action.SHOW : Action.HIDE;
+
     g.saveCssAttrs(attrsToSave);
 
     // CSS clip only works with absolute/fixed positioning
@@ -123,13 +130,16 @@ public class ClipAnimation extends PropertiesAnimation {
     }
     g.css("overflow", "hidden");
     g.css("visivility", "visible");
+
+    // Set the initial clip viewport before showing the element
+    onUpdate(0);
+    g.show();
   }
 
   @Override
   public void onUpdate(double progress) {
     super.onUpdate(progress);
-
-    if (action == Action.HIDE) {
+    if (currentAction == Action.HIDE) {
       progress = (1 - progress);
     }
     int w = g.outerWidth();
@@ -158,7 +168,6 @@ public class ClipAnimation extends PropertiesAnimation {
       bottom = h;
     }
 
-    String rect = top + "px " + right + "px " + bottom + "px  " + left + "px";
-    g.css("clip", "rect(" + rect + ")");
+    g.css("clip", "rect(" + top + "px " + right + "px " + bottom + "px  " + left + "px)");
   }
 }
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Fx.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Fx.java
index a2a374b8..e497d8f3 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Fx.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Fx.java
@@ -18,6 +18,8 @@ public class Fx {
    */
   public static boolean off = false;
 
+  public static boolean css3 = Transitions.transition != null;
+
   /**
    * A pojo to store css3 transition values.
    */
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/PropertiesAnimation.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/PropertiesAnimation.java
index d9404e22..d18a220a 100755
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/PropertiesAnimation.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/PropertiesAnimation.java
@@ -140,7 +140,7 @@ public class PropertiesAnimation extends GQAnimation {
   protected static final RegExp REGEX_SYMBOL_NUMBER_UNIT = RegExp.compile("^([+-]=)?([0-9+-.]+)(.*)?$");
 
   protected static final RegExp REGEX_NON_PIXEL_ATTRS = 
-      RegExp.compile("z-?index|font-?weight|opacity|zoom|line-?height|^\\$", "i");
+      RegExp.compile("z-?index|font-?weight|opacity|zoom|line-?height|scale|rotation|^\\$", "i");
 
   private static final RegExp REGEX_COLOR_ATTR = RegExp.compile(".*color$", "i");
 
@@ -269,17 +269,27 @@ public class PropertiesAnimation extends GQAnimation {
   }
 
   protected Easing easing;
-  protected JsObjectArray<Fx> effects = JsObjectArray.create();
-  protected Function[] funcs;
-  protected Properties prps;
-
+  protected JsObjectArray<Fx> effects;
+  private Function[] funcs;
   private Effects g;
 
+  public PropertiesAnimation(Element elem, Properties p, Function... funcs) {
+    this(null, elem, p, funcs);
+  }
+
   public PropertiesAnimation(Easing easing, Element elem, Properties p, Function... funcs) {
-    this.easing = easing != null ? easing : EasingCurve.linear;
-    this.e = elem;
+    if (easing == null) {
+      try {
+        easing = EasingCurve.valueOf(p.getStr("easing"));
+      } catch (Exception e) {
+        easing = EasingCurve.linear;
+      }
+    }
+    this.easing = easing;
     this.funcs = funcs;
-    this.prps = p;
+    setProperties(p);
+    setElement(elem);
+    
     g = $(e).as(Effects.Effects);
   }
 
@@ -314,6 +324,7 @@ public class PropertiesAnimation extends GQAnimation {
 
   @Override
   public void onStart() {
+    effects = JsObjectArray.create();
     boolean resize = false;
     boolean move = false;
     boolean hidden = !g.isVisible();
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Transitions.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Transitions.java
index 4d195e21..dd23c3d1 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Transitions.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Transitions.java
@@ -34,11 +34,11 @@ import com.google.gwt.user.client.DOM;
 
 /**
  * Transitions and transformation plugin for gQuery.
- * 
+ *
  * It is inspired on jquery.transit (http://github.com/rstacruz/jquery.transit)
  *
  * Usage examples:
- * <pre> 
+ * <pre>
 
     $("#foo")
      .transition("{ opacity: 0.1, scale: 2, x: 50, y: 50 }", 5000, "easeOutBack", 0)
@@ -53,25 +53,35 @@ import com.google.gwt.user.client.DOM;
  * </pre>
  */
 public class Transitions extends GQuery {
-  
+
   /**
    * A dictionary class with all the properties of an element transform
    * which is able to return the correct syntax for setting css properties.
    */
   public static class Transform  {
-    
+
     private static final RegExp transform3dRegex = RegExp.compile("^(rotate([XY]|3d)|perspective)$");
-    
+
     private HashMap<String, List<String>> map = new HashMap<String, List<String>>();
 
     public Transform(String s) {
       parse(s);
     }
-    
-    public List<String> get(String prop) {
-      return map.get(prop);
+
+    public String get(String prop) {
+      return listToStr(map.get(prop), ",");
+    }
+
+    private String listToStr(List<String> l, String sep) {
+      String v = "";
+      if (l != null) {
+        for (String s : l) {
+          v += (v.isEmpty() ? "" : sep) + s;
+        }
+      }
+      return v;
     }
-    
+
     private void parse(String s) {
       if (s != null) {
         RegExp re = RegExp.compile("([a-zA-Z0-9]+)\\((.*?)\\)", "g");
@@ -80,11 +90,11 @@ public class Transitions extends GQuery {
         }
       }
     }
-    
+
     public void set(String prop, String ...val) {
       setter(prop, val);
     }
-    
+
     public void setFromString(String prop, String ...val) {
       if (val.length == 1 && val[0] instanceof String) {
         String[] vals = ((String)val[0]).split("[\\s*,\\s*]");
@@ -93,7 +103,7 @@ public class Transitions extends GQuery {
         set(prop, val);
       }
     }
-    
+
     private void setter(String prop, String ...val) {
       if (prop.matches("(rotate[XY]?|skew[XY])")) {
         map.put(prop, unit(val[0], "deg"));
@@ -123,7 +133,7 @@ public class Transitions extends GQuery {
         map.put("translate", Arrays.asList(map.get("translateX").get(0), map.get("translateY").get(0)));
       }
     }
-    
+
     /**
      * Converts the dictionary to a transition css string.
      */
@@ -133,44 +143,41 @@ public class Transitions extends GQuery {
       String ret = "";
       for (Entry<String, List<String>> e: map.entrySet()) {
         if (has3d || !transform3dRegex.test(e.getKey())) {
-          String v = "";
-          for (String s : e.getValue()) {
-            v += (v.isEmpty() ? "" : ",") + s;
-          }
+          String v = listToStr(e.getValue(), ",");
           ret += (ret.isEmpty() ? "" : " ") + e.getKey() + "(" + v + ")";
         }
       }
       return ret;
     }
-    
+
     private List<String> unit(String val, String unit) {
       return Arrays.asList(val + (val.endsWith(unit) ? "" : unit));
     }
   }
-  
+
   // Used to check supported properties in the browser
   private static Style divStyle = DOM.createDiv().getStyle();
-  
+
   private static final String prefix = browser.msie ? "ms" : browser.opera ? "o" : browser.mozilla ? "moz" : browser.webkit ? "webkit" : "";
   private static final String transform = getVendorPropertyName("transform");
   private static final String TRANSFORM = "_t_";
   private static final String transformOrigin = getVendorPropertyName("transformOrigin");
-  
+
   protected static final RegExp transformRegex = RegExp.compile("^(scale|translate|rotate([XY]|3d)?|perspective|skew[XY]|x|y)$");
-  private static final String transition = getVendorPropertyName("transition");
-  
+  protected static final String transition = getVendorPropertyName("transition");
+
   private static final String transitionDelay = getVendorPropertyName("transitionDelay");
   private static final String transitionEnd = browser.mozilla || browser.msie ? "transitionend" : (prefix + "transitionEnd");
-  
+
   public static boolean has3d = supportsTransform3d();
-  
+
   public static final Class<Transitions> Transitions = GQuery.registerPlugin(
       Transitions.class, new Plugin<Transitions>() {
         public Transitions init(GQuery gq) {
           return new Transitions(gq);
         }
       });
-  
+
   private static String getVendorPropertyName(String prop) {
     // we prefer vendor specific names by default
     String vendorProp =  JsUtils.camelize("-" + prefix + "-" + prop);
@@ -186,40 +193,42 @@ public class Transitions extends GQuery {
     }
     return null;
   }
-  
+
   private static String property(String prop) {
     if (transformRegex.test(prop)) {
       return transform;
     }
     return prop.replaceFirst("^(margin|padding).+$", "$1");
   }
-  
+
   private static boolean supportsTransform3d() {
     String rotate = "rotateY(1deg)";
     divStyle.setProperty(transform, rotate);
     rotate = divStyle.getProperty(transform);
     return rotate != null && !rotate.isEmpty();
   }
-  
+
   protected Transitions(GQuery gq) {
     super(gq);
   }
 
-  @Override 
+  @Override
   public String css(String prop, boolean force) {
     if ("transform".equals(prop)) {
-      Transform t = data(TRANSFORM);
-      return t == null ? "" : t.toString();
+      return isEmpty() ? "" : getTransform(get(0), null).toString();
     } else if ("transformOrigin".equals(prop)) {
       return super.css(transformOrigin, force);
     } else if ("transition".equals(prop)) {
       return super.css(transition, force);
+    } else if (transformRegex.test(prop)) {
+      return isEmpty() ? "" : getTransform(get(0), null).get(prop);
     } else {
-      return super.css(prop, force);
+      String ret =  super.css(prop, force);
+      return ret;
     }
   }
-  
-  @Override 
+
+  @Override
   public Transitions css(String prop, String value) {
     if ("transform".equals(prop)) {
       for (Element e : elements()) {
@@ -241,7 +250,7 @@ public class Transitions extends GQuery {
     }
     return this;
   }
-  
+
   private List<String> filterPropertyNames(Properties p) {
     List<String> ret = new ArrayList<String>();
     for (String s : p.keys()) {
@@ -251,7 +260,7 @@ public class Transitions extends GQuery {
       if (m != null) {
         c = m;
       }
-      // chrome needs transition:-webkit-transform instead of transition:transform 
+      // chrome needs transition:-webkit-transform instead of transition:transform
       c = JsUtils.hyphenize(c);
       if (!ret.contains(c)) {
         ret.add(c);
@@ -259,7 +268,7 @@ public class Transitions extends GQuery {
     }
     return ret;
   }
-  
+
   private Transform getTransform(Element e, String initial) {
     Transform t = data(e, TRANSFORM);
     if (t == null || initial != null && !initial.isEmpty() ) {
@@ -268,11 +277,11 @@ public class Transitions extends GQuery {
     }
     return t;
   }
-  
+
   /**
    * The transition() method allows you to create animation effects on any numeric HTML Attribute,
    * CSS property, or color using CSS3 transformations and transitions.
-   * 
+   *
    * It works similar to animate(), supports chainning and queueing and an extra parameter for
    * delaying the animation.
    *
@@ -289,7 +298,7 @@ public class Transitions extends GQuery {
     if (isEmpty()) {
       return this;
     }
-    
+
     final Properties p = (stringOrProperties instanceof String) ? $$((String) stringOrProperties) : (Properties) stringOrProperties;
 
     final String oldTransitions = css(transition);
@@ -297,14 +306,14 @@ public class Transitions extends GQuery {
     if (easing == null) {
       easing = EasingCurve.ease;
     }
-    
+
     String attribs = duration + "ms" + " "  + easing.toString() + " " + delay + "ms";
     List<String> props = filterPropertyNames(p);
     String value  = "";
     for (String s : props) {
       value += (value.isEmpty() ? "" : ", ") + s + " " + attribs;
     }
-    
+
     final String transitionValue = value;
 
     // Use gQuery queue, so as we can chain transitions, animations etc.
@@ -313,12 +322,10 @@ public class Transitions extends GQuery {
       $(this)
         // Configure animation using transition property
         .css(transition, transitionValue)
-        // Set all css properties for this transition using the css method in this class 
-        .as(Transitions).css(p)
-        // prevent memory leak
-        .removeData(TRANSFORM);
+        // Set all css properties for this transition using the css method in this class
+        .as(Transitions).css(p);
     }});
-    
+
     // restore oldTransitions in the element, and use the queue to prevent more effects being run.
     // TODO: Use transitionEnd events once GQuery supports non-bit events
     delay(duration + delay, new Function(){public void f() {
@@ -327,7 +334,7 @@ public class Transitions extends GQuery {
         .css(transition, oldTransitions)
         .each(funcs);
     }});
-    
+
     return this;
   }
 
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/TransitionsAnimation.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/TransitionsAnimation.java
index d15f19ec..14865119 100755
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/TransitionsAnimation.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/TransitionsAnimation.java
@@ -21,6 +21,9 @@ import com.google.gwt.dom.client.Element;
 import com.google.gwt.query.client.Function;
 import com.google.gwt.query.client.Properties;
 import com.google.gwt.query.client.js.JsObjectArray;
+import com.google.gwt.query.client.plugins.effects.ClipAnimation.Action;
+import com.google.gwt.query.client.plugins.effects.ClipAnimation.Corner;
+import com.google.gwt.query.client.plugins.effects.ClipAnimation.Direction;
 import com.google.gwt.query.client.plugins.effects.Fx.TransitFx;
 import com.google.gwt.regexp.shared.MatchResult;
 
@@ -29,7 +32,66 @@ import com.google.gwt.regexp.shared.MatchResult;
  * using CSS3 transitions
  */
 public class TransitionsAnimation extends PropertiesAnimation {
-  
+
+  public static class TransitionsClipAnimation extends TransitionsAnimation {
+
+    private Action action;
+    private Corner corner;
+    private Direction direction;
+    private Action currentAction;
+
+    public TransitionsClipAnimation(Element elem, Action a, Corner c, Direction d, Easing easing,
+        Properties p, final Function... funcs) {
+      super(easing, elem, p, funcs);
+      this.action = a;
+      this.corner = c;
+      this.direction = d;
+    }
+
+    public void onStart() {
+      boolean hidden = !g.isVisible();
+
+      super.onStart();
+
+      currentAction = action != Action.TOGGLE ? action :  hidden ? Action.SHOW : Action.HIDE;
+      int bit = currentAction == Action.HIDE ? 1 : 0;
+
+      String originX = "left", originY = "top";
+      int scaleXini = 0^bit, scaleYini = scaleXini;
+      int scaleXend = 1^bit, scaleYend = scaleXend;
+
+      if (direction == Direction.VERTICAL) {
+        scaleXini = scaleXend = 1;
+      }
+      if (direction == Direction.HORIZONTAL) {
+        scaleYini = scaleYend = 1;
+      }
+      if (corner == Corner.CENTER) {
+        originX = originY = "center";
+      }
+      if (corner == Corner.TOP_RIGHT || corner == Corner.BOTTOM_RIGHT) {
+        originX = "right";
+      }
+      if (corner == Corner.BOTTOM_LEFT || corner == Corner.BOTTOM_RIGHT) {
+        originY = "bottom";
+      }
+
+      g.show().css("transformOrigin", originX + " " + originY);
+
+      effects.add(new TransitFx("scale", "", scaleXini + " " + scaleYini, scaleXend + " " + scaleYend, ""));
+    }
+
+    @Override
+    public void onComplete() {
+      super.onComplete();
+      if (currentAction == Action.HIDE) {
+        g.hide();
+      }
+      g.css("transformOrigin", "");
+      g.css("transform", "scale(1 1)");
+    }
+  }
+
   public static Fx computeFxProp(Element e, String key, String val, boolean hidden) {
     Transitions g = $(e).as(Transitions.Transitions);
     String unit = "";
@@ -47,35 +109,28 @@ public class TransitionsAnimation extends PropertiesAnimation {
 
     String cur = g.css(key, true);
     String trsStart = cur, trsEnd = trsStart;
-    
+
     if ("show".equals(val)) {
       g.saveCssAttrs(key);
       trsStart = "0";
     } else if ("hide".equals(val)) {
-      if (hidden) {
-        return null;
-      }
       g.saveCssAttrs(key);
       trsEnd = "0";
     } else {
       MatchResult parts = REGEX_SYMBOL_NUMBER_UNIT.exec(val);
       if (parts != null) {
         unit = REGEX_NON_PIXEL_ATTRS.test(key) || Transitions.transformRegex.test(key) ? "" : "px";
-        
+
         String part1 = parts.getGroup(1);
         String part2 = parts.getGroup(2);
         String part3 = parts.getGroup(3);
         trsEnd = "" + Double.parseDouble(part2);
-        
+
         if (unit.isEmpty() && part3 != null) {
           unit = part3;
         }
         if (trsStart.isEmpty()) {
-          trsStart = "0";
-        }
-        
-        if (!trsStart.endsWith(unit)) {
-          trsStart += unit;
+          trsStart = key.matches("scale") ? "1" : "0";
         }
 
         if (part1 != null && !part1.isEmpty()) {
@@ -85,13 +140,18 @@ public class TransitionsAnimation extends PropertiesAnimation {
           trsEnd = "" + (st + (n*en));
         }
       } else {
-        trsStart = trsEnd = val;
+        trsStart = "";
+        trsEnd = val;
       }
     }
     return new TransitFx(key, val, trsStart, trsEnd, unit);
   }
 
-  private Transitions g;
+  protected Transitions g;
+
+  public TransitionsAnimation(Element elem, Properties p, Function... funcs) {
+    this(null, elem, p, funcs);
+  }
 
   public TransitionsAnimation(Easing easing, Element elem, Properties p, Function... funcs) {
     super(easing, elem, p, funcs);
@@ -102,7 +162,10 @@ public class TransitionsAnimation extends PropertiesAnimation {
     Properties p = $$();
     for (int i = 0; i < effects.length(); i++) {
       TransitFx fx = (TransitFx)effects.get(i);
-      p.set(fx.cssprop, (isStart ? fx.transitStart : fx.transitEnd) + fx.unit);
+      String val = isStart ? fx.transitStart : fx.transitEnd;
+      if (!val.isEmpty()) {
+        p.set(fx.cssprop, val + fx.unit);
+      }
     }
     return p;
   }
@@ -132,12 +195,18 @@ public class TransitionsAnimation extends PropertiesAnimation {
   }
 
   @Override
+  public void onUpdate(double progress) {
+  }
+
+  @Override
   public void run(int duration) {
     onStart();
     Properties p = getFxProperties(true);
     g.css(p);
+    // TODO: Reflow, it seems it is not needed in chrome and FF, check other browsers
+    // g.css("offsetHeight");
     p = getFxProperties(false);
-    g.transition(p, duration - 150, easing, 0, new Function(){public void f() {
+    g.transition(p, duration, easing, 0, new Function(){public void f() {
       onComplete();
     }});
   }