5

CSS アニメーションが終了したときに GWT ウィジェットに通知されるようにしたいと考えています。

プレーンな HTML/Javascript では、次のようにイベント ハンドラーを登録することで簡単に実行できます。

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

GWTでこれを行うにはどうすればよいですか?

このタイプのイベントは GWT のDOMImplクラスには認識されないため、エラーが発生し続けます。

「不明なイベント タイプ webkitAnimationEnd をシンクしようとしています」。

4

3 に答える 3

5

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

魔法のように動作します！ありがとうダルテニウス！

誰かがこれの弱点を見つけることができれば、もちろん喜んでお知らせします.

于 2011-11-24T21:16:45.623 に答える
1

ネイティブ（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);
于 2011-11-24T10:08:51.267 に答える
0

Darthenius のソリューションを少し拡張しました。このコードには、終了時にイベント ハンドラーを削除するメカニズムも含まれています。これは私のアプリケーションに必要なものですが、すべてのコンテキストで必要なものではない可能性があります。YMMV！

私の最終的なコードは次のようになります。

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);
    }
}
于 2015-02-25T23:42:42.963 に答える