How to add an AnimationEnd CSS event handler to a GWT widget?

Question

I want my GWT widget to be notified when CSS animations are complete .

In simple HTML / Javascript, this is easy to do by registering an event handler as follows:

elem.addEventListener("webkitAnimationEnd", function(){ // do something }, false); // add more for Mozilla etc. 

How to do it in GWT?

This type of event is unknown to the GWT DOMImpl classes, so I continue to receive the error message " Attempt to omit the unknown type of event webkitAnimationEnd ".

Thanks!

Answer 1

You can always write your own code (JavaScript):

 public class CssAnimation { public static native void registerCssCallback( Element elem, AsyncCallback<Void> callback) /*-{ elem.addEventListener("webkitAnimationEnd", function() { $entry(@CssAnimation::cssCallback(Lcom/google/gwt/user/client/rpc/AsyncCallback;)(callback)); }, false); }-*/; protected static void cssCallback(AsyncCallback<Void> callback) { callback.onSuccess(null); } } 

I have not tried the code above. Let me know if it works as expected.

---

You can use the GWT Animation class to achieve the same effect. For example,

  new com.google.gwt.animation.client.Animation() { final com.google.gwt.dom.client.Style es = widget.getElement().getStyle(); @Override protected void onUpdate(double progress) { setOpacity(1 - interpolate(progress)); } private void setOpacity(double opacity) { es.setProperty("opacity", Double.toString(opacity)); es.setProperty("filter", "alpha(opacity=" + 100 * opacity + ")"); } @Override protected void onComplete() { /* ... run some code when animation completes ... */ } }.run(2000, 5000); 

Answer 2

Based on the answer of Darthenius and Clay Lenhart Blog , I finally decided for this solution:

 private native void registerAnimationEndHandler(final Element pElement, final CbAnimationEndHandlerIF pHandler) /*-{ var callback = function(){ [e-mail] ::onAnimationEnd()(); } if (navigator.userAgent.indexOf('MSIE') < 0) { // no MSIE support pElement.addEventListener("webkitAnimationEnd", callback, false); // Webkit pElement.addEventListener("animationend", callback, false); // Mozilla } }-*/; 

CbAnimationEndHandlerIF is the simple EventHandler user interface:

 public interface CbAnimationEndHandlerIF extends EventHandler { void onAnimationEnd(); } 

It works like a charm! Thanks Dartenius!

If anyone can notice a weakness in this, I will of course be happy to know.

Answer 3

I expanded the solution a bit from Darthenius. This code also includes a mechanism to remove the event handler when it is completed. This is what I need for my application, but it may not be what you want in all contexts. YMMV!

My last code is as follows:

 import com.google.gwt.dom.client.Element; import com.google.gwt.user.client.rpc.AsyncCallback; public class CssAnimation { public static native void registerCssCallback(Element elem, AsyncCallback<Void> callback) /*-{ var eventListener = function () { $entry(@CssAnimation::cssCallback(Lcom/google/gwt/user/client/rpc/AsyncCallback;)(callback)); elem.removeEventListener("webkitAnimationEnd", eventListener); }; elem.addEventListener("webkitAnimationEnd", eventListener, false); }-*/; protected static void cssCallback(AsyncCallback<Void> callback) { callback.onSuccess(null); } }