How to add CSS AnimationEnd event handler to GWT widget?

后端 未结 3 901
情话喂你
情话喂你 2021-01-13 02:19

I would like my GWT widget to be notified when its CSS animation is over.

In plain HTML/Javascript this is easily done by registering an event handler like so:

3条回答
  •  佛祖请我去吃肉
    2021-01-13 02:38

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

    My final code looks like this:

    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 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 callback) {
            callback.onSuccess(null);
        }
    }
    

提交回复
热议问题