如何将CSS AnimationEnd事件处理程序添加到GWT小部件？

Question

我希望我的GWT小部件在其CSS动画结束时得到通知.

在纯HTML/Javascript中,这可以通过注册事件处理程序来轻松完成:

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

我怎么能在GWT中做到这一点？

这种类型的事件对于GWT的DOMImpl类是未知的,因此我不断收到错误" 试图吸收未知事件类型webkitAnimationEnd ".

谢谢!

Answer 1

根据Darthenius的回答和Clay Lenhart的博客,我终于找到了解决方案:

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

这CbAnimationEndHandlerIF是一个简单的自定义EventHandler界面:

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

奇迹般有效!谢谢Darthenius!

如果有人能发现这方面的弱点,我当然会很高兴知道.

Answer 2

您始终可以自己编写一些本机（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);
  }
}

我没有尝试过上面的代码。让我知道它是否按预期工作。

您可以使用GWT的Animation类来达到相同的效果。例如，

  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);