如何添加CSS AnimationEnd事件处理程序到GWT窗口小部件？ [英] How to add CSS AnimationEnd event handler to GWT widget?

问题描述

我想要在我们的GWT小部件的 CSS动画结束时收到通知。

在普通HTML / Javascript中，通过注册如下所示的事件处理程序很容易完成：

  elem.addEventListener（webkitAnimationEnd，function（）{
 // do something 
}，false）; 
 //为Mozilla等添加更多。
  

如何在GWT中执行此操作？ / p>

这种类型的事件对GWT的 DOMImpl 类未知，因此我一直收到错误 sink未知事件类型webkitAnimationEnd 。

谢谢！

解决方案

您可以自行编写一些原生（JavaScript）代码：

  public class CssAnimation {
 public static void registerCssCallback（
元素elem，AsyncCallback< Void>回调）/ *  -  {
 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（2000，5000）; 
  

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:

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

How can I do this in GWT?

This type of event is unknown to GWT's DOMImpl classes, so I keep getting an error "Trying to sink unknown event type webkitAnimationEnd".

Thanks!

解决方案

You can always write some of the native (JavaScript) code yourself:

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 haven't tried the code above. Let me know if it works as expected.

---

You can use GWT's 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);

这篇关于如何添加CSS AnimationEnd事件处理程序到GWT窗口小部件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！